vue中如何集成EasyPlay播放器
安装EsayPlay依赖(npm慢可以使用cnpm或者yarn)
npm install @easydarwin/easywasmplayer --save
安装完成后找到下面两个文件 拷贝到public文件下
node_modules >> @easydarwin >> easywasmplayer >> EasyWasmPlayer.js
node_modules >> @easydarwin >> easywasmplayer >> libDecoder.wasm
在index.html中引入EasyWasmPlayer.js
<script src="./EasyWasmPlayer.js"></script>
新建vue组件EsPlay完成播放器的封装。使用时引入传值即可。
注意:
1. 代码中的id用来实例化播放器窗口,为了同时可以打开多个播放器,所以id不能重复,使用uuid这个方法生成一个随机的id,该方法在后面给出。
2. 这个视频播放器带有logo,我在通过更改样式已经去除掉,如果需要删掉下面代码即可
<template>
<div class="box">
<div class="player-title">{{ videoName }}<div class="close-btn" @click="closeVideo" /></div>
<div :id="id"></div>
</div>
</template>
<script>
import uuid from '@/utils/uuid'
export default {
props: {
url: { // 接收视频流
type: String,
default: ''
},
videoId: { // 接受视频的id,用于关闭使用
type: String,
default: ''
},
videoName: { // 视频的名字
type: String,
default: ''
}
},
data() {
return {
id: uuid() // 生成随机id
}
},
mounted() {
this.inintPlayer()
},
methods: {
closeVideo() { // 通过穿进的id关闭播放器窗口
this.$nextTick(() => {
this.$emit('closePlayer', this.videoId)
})
},
inintPlayer() { // 播放器实例化
this.$nextTick(() => {
this.player = new WasmPlayer(null, this.id, this.callbackfun, { Height: true, fluent: true, HideKbs: true })
this.player.play(this.url, 1)
})
}
callbackfun(e) {}
}
}
</script>
<style lang="scss" scoped>
.box {
width:100%;
height:100%;
background-color: #0a0d16;
position: relative;
/deep/ .iconqingxiLOGO:before { // 去除logo
content: '';
}
/deep/ .iconfont + div {
right: 55px;
}
.player-title {
position: absolute;
top: 0;
left: 0;
height: 25px;
line-height: 25px;
width: 100%;
z-index: 10000;
background: rgba(0, 0, 0, 0);
color: #ffffff;
}
.close-btn {
width: 20px;
height: 20px;
text-align: center;
cursor: pointer;
position: absolute;
top: 2px;
right: 2px;
background-image: url("../assets/video/player-close.png") no-repeat center;
}
}
</style>
uuid方法
export default function uuid() {
var uuid = []
var hexDigits = '0123456789abcdef'
for (var i = 0; i < 36; i++) {
uuid[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
}
uuid[14] = '4'
uuid[19] = hexDigits.substr((uuid[19] & 0x3) | 0x8, 1)
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
return 'u' + uuid.join('').replaceAll('-', '')
}