vue项目中使用video.js播放m3u8格式文件

1.安装依赖包

npm install video.js --save // 视频播放器插件
npm install videojs-contrib-hls --save // 播放hls流插件

2.在main.js引入vido.js的样式文件

import 'video.js/dist/video-js.css' //videojs样式

3.video.js所在页面引入和使用

import videojs from 'video.js'
import 'videojs-contrib-hls'
import "@videojs/http-streaming"

4. 页面

====================================

/ 播放器初始化

this.player = videojs('cameraMonitoringVideo', {
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true,
muted: true //静音模式 、、 解决首次页面加载播放。
}, function () {
this.play() // 自动播放
})

video.js视频播放器销毁
// 离开页面销毁视频播放器

beforeDestroy() {
if (this.player != null) {
this.player.dispose() // dispose()会直接删除Dom元素
}
}

二、使用video.js播放视频流出现的问题以及解决方案
video.js播放hls时，当视频的 m3u8 文件加载成功并且浏览器无法获取其中一个 ts 文件时，video.js会不断进行重试，导致视频画面卡顿，无法正常播放视频画面。

错误信息： 404(Not Found) VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the final playlist.

// 监听错误事件(如果其中一个ts文件获取失败，需要进行重试次数限制，并且重新加载视频流，以保证视频能够继续播放)

this.player.tech_.on('retryplaylist', () => { console.log("ts文件获取失败404....."); // this.src(this.vdoSrcGuan) this.load() this.play() })

video.js播放hls时，出现视频延迟加载的问题。

this.player.on('timeupdate', function () { // 计算表最新推流的时间和现在播放器播放推流的时间 let differTime = this.buffered().end(0) - this.currentTime(); // 差值大于6s时进行重新加载直播流 if (differTime >= 6){ console.log("重新加载视频流",this.player); // this.src(this.vdoSrcGuan) this.load() this.play() } })

video.js播放hls时，初始化播放正常，过一段时间出现视频卡顿，导致页面所有的视频一直加载，无法恢复正常播放。

// 监听video播放器卡顿加载loading时候触发seeking
// 说明：(1)如果卡顿次数不到三次，seekingTimes归零，继续播放；
// (2)如果卡顿次数达到三次，就重新加载视频流；

let seekingTimes = 0 this.player.on("seeking",function(){ seekingTimes ++ console.log("直播卡顿加载loading",this.player); if(seekingTimes >= 3) { seekingTimes = 0 // this.src(this.vdoSrcGuan) this.load() this.play() } }) //监听video播放器拿到视频流重新播放时出发seeked this.player.on('seeked',function(){ seekingTimes = 0 // 已经拿到视频流,可以播放 console.log('seeked') })

————————————————
版权声明：本文为CSDN博主「hzx-web」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39135926/article/details/118225035