公司有视频播放的业务方面的需求，所以最近关注了一下，之前有位写了一个简版的，是拿阿里云开源的一个视频播放器写的，当时只上了一个视频播放的功能，现在要添加一个新的功能，增加视频埋点，播放多长时间，暂停，结束，拖拽等等功能的记录，这个功能开发到了我这里，我找了三个开源的视频播放器
西瓜播放器v2.h5player.bytedance.com/ 好像是字节一个团队开源的
腾讯视频统一播放器 m.v.qq.com/txp/v3/ 应该是腾讯视频团队开源的
阿里云视频播放器 help.aliyun.com/document_de…
看了一下这三个文档，可能是先入为主的想法吧，也可能是之前的同事用的就是阿里云的播放器，改动比较小吧，所以就用了阿里云的（感觉西瓜播放器的文档和功能，也很不错）。
备注：这次的视频是一个在线视频，提前传到阿里云服务器上的，可在浏览器输入地址直接访问，这样也有不好的地方，稍微懂点知识点的，就可以在f12的控制台看到你视频的地址，需要前后端配合，加上签名，避免不正常的访问。
<div id="app">
<div class="prism-player" id="J_prismPlayer"></div>
</div>
<script src="./vue.js"></script>
<script>
let { createApp } = Vue
let app = createApp({
data() {
return {
player: null
}
},
mounted() {
this.player = new Aliplayer({
"id": "J_prismPlayer", //id名称
"source": "", //url在线视频地址
"cover": "", // 视频封面地址
"width": "500px", //视频宽度
"height": "500px", //视频高度
"autoplay": true
}, (player) => {
console.log("播放器创建好了");
});
this.operation()
},
methods: {
// 操作
operation(){
// 暂停
this.player.on("pause",()=>{
console.log("暂停")
})
// 播放视频（这里面播放包含两个，第一个播放和暂停以后播放）
this.player.on("play",()=>{
console.log("播放")
})
// 播放位置发生改变时触发 this.player.getCurrentTime()是获取当前播放时间的
this.player.on("timeupdate",(e)=>{
console.log("当前时间", this.player.getCurrentTime())
})
//全屏和退出全屏，拖拽就不在这写了，详细可以看官方文档
}
},
}).mount("#app")
</script>
timeupdate这个是播放位置发生改变时触发，每秒执行四次
之前用uni-app的时候，uni.createInnerAudioContext()监听音频的时候，也是每秒执行四次，这个问题，请教了一下公司知识渊博的后端，他可能也不太懂，然后对我不懂装懂的解释了一下，这是操作系统时间片轮转的原因，好吧，这也涉及到我的知识盲区了，不过这个目前来说不太重要，先把功能实现了，再去研究这个吧。
这个视频埋点的要求是播放三十秒，发送一次请求，知道了每秒走4次
let count1 = 0, count2=0;
this.player.on("timeupdate",(e)=>{
console.log("当前时间", this.player.getCurrentTime())
count +=1;
if(count % 4 === 0){
count2 += 1
if(count2 % 30 ===0){
console.log("发送请求")
}
}
})
这样，播放三十秒发送一次请求的功能就实现了，后端给我的接口文档，每个请求都要有当前播放的时间，音量大小，是否全屏，我就把axios做个一个封装
playerAxios(obj){
this.axios.post("请求地址",{
...obj, //各个埋点传递的参数
volume:this.player.getVolume(), //获取当前音量
is_full_screen:this.player.fullscreenService.getIsFullScreen(), //获取播放器全屏状态
//获取当前播放时间，注意从上面的时间截图来看，时间不是整数，要把他转化为整数，或者和后端协商
video_time:parseInt(this.player.getCurrentTime())
}).then(res=>{
})
}
this.player.on("pause",()=>{
playerAxios({
id:"XXX"//接口文档暂停定义的字段
})
})
这样，基本的视频埋点功能就实现了，记得要好好测试一下，对现在的公司来说，视频的数据还是很重要的，通过埋点可以分析出看视频的客户喜欢那些，这会影响公司后面的决策的。
