videojs解決直播延時的問題

問題:使用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})


            }

        })

到此爲止直播延時的問題基本上就解決了,親測可用

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章