問題:使用videojs進行直播的時候,網絡發生延遲或暫停之後再次進行播放會導致畫面延時!
實例化video
let videoFlvOptions = {
techOrder: ['html5', 'flvjs'],
flvjs: {
mediaDataSource: {
isLive: true,
cors: true,
withCredentials: false,
enableStashBuffer: false
},
},
sources: [{
src: '',
type: 'video/x-flv'
}],
controls: true,
preload: "none",
};
let videoFlvPlayer = videojs('videojs-player', videoFlvOptions, function onPlayerReady() {});
videoFlvOptions是videojs播放器需要的參數,這裏我接受的推流格式爲flv,具體參數根據自己的需求進行配置由於src是後期進行動態改動所以寫的空字符串。
videoFlvPlayer是videojs實例化的一個對象,videojs-player是video標籤的id屬性值。
監聽視頻的播放
// 監聽video播放器播放時間的變化
videoFlvPlayer.on('timeupdate',function () {
//console.log("正在播放------");
// 計算表最新推流的時間和現在播放器播放推流的時間
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
console.log(differTime);
// 差值小於1.5s時根據1倍速進行播放
if (differTime < 1.5){
videoFlvPlayer.playbackRate(1);
}
// 差值大於1.5s小於10s根據1.2倍速進行播放
if (differTime < 10 && differTime > 1.5) {
videoFlvPlayer.playbackRate(1.2);
}
//console.log(videoFlvPlayer.buffered);
// 差值大於10s時進行重新加載直播流
if (differTime > 10){
console.log("重新刷新流!!");
// 注意這裏重新加載video是自己封裝的方法,需要銷燬video並重新創建video
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
}
})
到此爲止直播延時的問題基本上就解決了,親測可用