问题:使用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})
}
})
到此为止直播延时的问题基本上就解决了,亲测可用