项目创建

2025-07-04 17:16:38 +08:00
parent ce47b39fa5
commit 719911918f
372 changed files with 105035 additions and 32 deletions
@@ -0,0 +1,111 @@
+<!-- 视频播放器组件：https://h5player.bytedance.com/-->
+<template>
+  <div :id="playerId" />
+</template>
+
+<script setup lang="ts">
+  import Player from 'xgplayer'
+  import 'xgplayer/dist/index.min.css'
+
+  defineOptions({ name: 'ArtVideoPlayer' })
+
+  interface Props {
+    /** 播放器容器 ID */
+    playerId: string
+    /** 视频源URL */
+    videoUrl: string
+    /** 视频封面图URL */
+    posterUrl: string
+    /** 是否自动播放 */
+    autoplay?: boolean
+    /** 音量大小(0-1) */
+    volume?: number
+    /** 可选的播放速率 */
+    playbackRates?: number[]
+    /** 是否循环播放 */
+    loop?: boolean
+    /** 是否静音 */
+    muted?: boolean
+    commonStyle?: VideoPlayerStyle
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    playerId: '',
+    videoUrl: '',
+    posterUrl: '',
+    autoplay: false,
+    volume: 1,
+    loop: false,
+    muted: false
+  })
+
+  // 设置属性默认值
+
+  // 播放器实例引用
+  const playerInstance = ref<Player | null>(null)
+
+  // 播放器样式接口定义
+  interface VideoPlayerStyle {
+    progressColor?: string // 进度条背景色
+    playedColor?: string // 已播放部分颜色
+    cachedColor?: string // 缓存部分颜色
+    sliderBtnStyle?: Record<string, string> // 滑块按钮样式
+    volumeColor?: string // 音量控制器颜色
+  }
+
+  // 默认样式配置
+  const defaultStyle: VideoPlayerStyle = {
+    progressColor: 'rgba(255, 255, 255, 0.3)',
+    playedColor: '#00AEED',
+    cachedColor: 'rgba(255, 255, 255, 0.6)',
+    sliderBtnStyle: {
+      width: '10px',
+      height: '10px',
+      backgroundColor: '#00AEED'
+    },
+    volumeColor: '#00AEED'
+  }
+
+  // 组件挂载时初始化播放器
+  onMounted(() => {
+    playerInstance.value = new Player({
+      id: props.playerId,
+      lang: 'zh', // 设置界面语言为中文
+      volume: props.volume,
+      autoplay: props.autoplay,
+      screenShot: true, // 启用截图功能
+      url: props.videoUrl,
+      poster: props.posterUrl,
+      fluid: true, // 启用流式布局，自适应容器大小
+      playbackRate: props.playbackRates,
+      loop: props.loop,
+      muted: props.muted,
+      commonStyle: {
+        ...defaultStyle,
+        ...props.commonStyle
+      }
+    })
+
+    // 播放事件监听器
+    playerInstance.value.on('play', () => {
+      console.log('Video is playing')
+    })
+
+    // 暂停事件监听器
+    playerInstance.value.on('pause', () => {
+      console.log('Video is paused')
+    })
+
+    // 错误事件监听器
+    playerInstance.value.on('error', (error) => {
+      console.error('Error occurred:', error)
+    })
+  })
+
+  // 组件卸载前清理播放器实例
+  onBeforeUnmount(() => {
+    if (playerInstance.value) {
+      playerInstance.value.destroy()
+    }
+  })
+</script>