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. 頁面

<video id="cameraMonitoringVideo" class="video-js vjs-default-skin" preload="auto">
<source :src="vodeoUrl" type="application/x-mpegURL">
</video>

 

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

/ 播放器初始化

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