videojs解决直播延时的问题

1 篇文章 0 订阅
1 篇文章 0 订阅

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


            }

        })

到此为止直播延时的问题基本上就解决了,亲测可用

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值