flv.js--播放直播流时出现的累积延迟、断流重连以及画面卡顿的解决方法

本文参考了https://blog.csdn.net/HJFQC/article/details/113188241，有细微的改动

解决延迟见

https://blog.csdn.net/daqinzl/article/details/122370388

断流重连

通过监听flvjs.Events.ERROR来判断连接是否已经断开,然后进行断流重连:

player的定义

       

代码如下:

$('#videoElement').on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
        console.log("errorType:", errorType);
        console.log("errorDetail:", errorDetail);
        console.log("errorInfo:", errorInfo);
        //视频出错后销毁重新创建
         if (this.player) {
          this.player.pause();
          this.player.unload();
          this.player.detachMediaElement();
          this.player.destroy();
          this.player= null;
          this.createPlayer(videoElement, this.url);
        }
      });

画面卡顿
如果画面卡住不动,可能是服务端推流突然断开,然后在很快的时间内继续推流,此时因为客户端还未超时,流会继续推送到原链接,此时视频会卡在掉线的那个时间,不会继续播放.这时需要监听推流的decodedFrame,如果decodedFrame不再发生变化,我们就销毁掉该实例并进行重新连接,代码如下:

$('#videoElement').on("statistics_info", function (res) {
       if (this.lastDecodedFrame == 0) {
         this.lastDecodedFrame = res.decodedFrames;
         return;
       }
       if (this.lastDecodedFrame != res.decodedFrames) {
         this.lastDecodedFrame = res.decodedFrames;
       } else {
           this.lastDecodedFrame = 0;
           if (this.player) {
             this.player.pause();
             this.player.unload();
             this.player.detachMediaElement();
             this.player.destroy();
             this.player= null;
             this.createPlayer(videoElement, this.url);
         }
       }
     });

完整的flv播放的html页面

   
   
   

   

       
   

   

   

        加载
        开始
        暂停
        停止
       
        跳转