Vue2
npm install xgplayer-vue@latest
引入xgplayer,封装成一个公共组件
src/components/xgPlayer/xgPlayer.vue
<template>
<Xgplayer :config="config" @player="Player = $event" />
</template>
<script>
import Xgplayer from 'xgplayer-vue'
export default {
components: {
Xgplayer
},
data () {
return {
config: {
id: 'vs',
url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4', // 修改为能播放的视频地址
width: '50%', // 宽度可以是 数字 ,也可以是百分比
height: 500,
// autoplay: true,
download: true,
poster: 'http://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
playbackRate: [0.5, 0.75, 1, 1.5, 2] // 倍速
},
Player: null
}
}
}
</script>
<style>
#xgPlayer{
border: 1px solid red;
}
</style>
组件中使用
<template>
<div>
<h1>播放器</h1>
<Player />
</div>
</template>
<script>
import Player from '@/components/xgPlayer/xgPlayer.vue'
export default {
name: 'chartContainer',
components: {
Player
},
</script>
<style>
</style>
Vue3
<template>
<div style="width: 100%; height: 100%"
:id="id"></div>
</template>
<script setup>
import { onMounted, watch } from 'vue'
import Player from 'xgplayer'
const props = defineProps({
id: {
type: String,
required: true,
},
videoUrl: {
type: String,
default: () =>
'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
},
poster: {
type: String,
default: () =>
'http://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
},
playsinline: {
type: Boolean,
default: true,
},
width: {
type: String,
default: '50%',
},
height: {
type: String,
default: '50%',
},
})
watch(
() => props.videoUrl,
(newUrl) => {
initPlayer()
},
{
deep: true,
}
)
onMounted(() => {
initPlayer()
})
// 初始化西瓜视频
const initPlayer = () => {
let player = new Player({
id: props.id,
url: props.videoUrl,
poster: props.poster,
playsinline: props.playsinline,
height: props.height,
width: props.width,
thumbnail: {
pic_num: 44,
width: 160,
height: 90,
col: 10,
row: 10,
urls: [
'//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg',
],
},
danmu: {
comments: [
{
duration: 15000,
id: '1',
start: 3000,
txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
style: {
//弹幕自定义样式
color: '#ff9500',
fontSize: '20px',
border: 'solid 1px #ff9500',
borderRadius: '50px',
padding: '5px 11px',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
},
},
],
area: {
start: 0,
end: 1,
},
},
whitelist: [''],
})
// 超清、高清、标清 分别对应的地址
player.emit('resourceReady', [
{
name: '超清',
url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
},
{
name: '高清',
url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
},
{
name: '标清',
url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
}
])
}
</script>
<template>
<div class="bigBox">
<h1>播放器</h1>
<XgPlayer :id="'xgPlayer'" />
</div>
</template>
<script lang="ts" setup>
import XgPlayer from '@/components/xgPlayer/xgPlayer.vue'
import 'xgplayer/dist/index.min.css'
</script>
<style scoped>
.bigBox{
height: 95vh !important;
}
</style>