浅念
112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<!-- 视频播放器组件：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>
|