vue通过video.js解决m3u8视频播放格式的方法

m3u8内部本身就是一系列的ts流，每播放一个片段都会有一次请求。
你要是想缓存，可能需要换格式，或者优化原视频进行必要的压缩

实现自动播放

autoplay：自动播放 + muted：静音播放 【解决视频或音频标签自动播放在谷歌浏览器中不起作用】

vue中使用video插件，播放m3u8视频

动态切换视频地址，不能直接组件变量赋值，需使用

mounted(){<br />this.getVideo()<br />}<br />methods: {<br />用于请求视频，拿到视频流<br />getVideo(){<br />this.myVideo = videojs("myVideo")<br />api().then( ( result ) => {<br />this.myVideo.src({<br />src: result.url,<br />type: "application/x-mpegURL" // 在重新添加视频源的时候需要给新的type的值 <br />])<br />})<br />}<br />}

当实现视频循环播放

添加loop属性时，利用this.$refs.video.addEventListener(‘ended’ , this.isStop)监听视频是否播放完毕是监测不到的，如果想同时实现需要先检测到视频结束在控制播放

isStop(){
this.myVideo.play()
}

//检测视频是否播放完毕
this.myVideo.on(‘timeupdate’, function () {
// 如果 currentTime() === duration()，则视频已播放完毕
if (player.duration() != 0 && player.currentTime() === player.duration()) {
// 播放结束
}
})

参考文档：
https://videojs.com/advanced?video=disneys-oceans
https://docs.videojs.com/
https://www.awaimai.com/2053.html
https://www.jb51.net/article/166522.htm
https://www.cnblogs.com/saysmy/p/6429835.html
https://www.codeleading.com/article/85003869621/
https://blog.csdn.net/qq_42842709/article/details/84942207
https://www.cnblogs.com/saysmy/p/6429835.html