问题：使用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})
            }
        })

到此为止直播带货开发延时的问题基本上就解决了，亲测可用

声明：本文由云豹科技转发自搬砖的痛苦谁知道博客，如有侵权请联系作者删除

ITPub博客

直播带货开发，通过videojs解决直播延时

实例化video

监听视频的播放

最新文章