vue使用西瓜视频插件xgplayer

本文主要是介绍vue使用西瓜视频插件xgplayer，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>

这篇关于vue使用西瓜视频插件xgplayer的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---