flv.js

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

解决延迟见

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

断流重连

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

player的定义

        Your browser is too old which doesn't support HTML5 video.

代码如下:

$('#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页面

        flv.js demo             .mainContainer {     display: block;     width: 1024px;     margin-left: auto;     margin-right: auto; }

.urlInput {     display: block;     width: 100%;     margin-left: auto;     margin-right: auto;     margin-top: 8px;     margin-bottom: 8px; }

.centeredVideo {     display: block;     width: 100%;     height: 576px;     margin-left: auto;     margin-right: auto;     margin-bottom: auto; }

.controls {     display: block;     width: 100%;     text-align: left;     margin-left: auto;     margin-right: auto; }    

            Your browser is too old which doesn't support HTML5 video.                     加载         开始         暂停         停止                 跳转                          var player = document.getElementById('videoElement');                  $('#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);         }       });                  $('#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);          }        }      });                  function flv_load() {             //player.load();             start();         }                  function flv_start() {             player.play();         }

        function flv_pause() {             player.pause();         }

        function flv_destroy() {             player.pause();             player.unload();             player.detachMediaElement();             player.destroy();             player = null;         }

        function flv_seekto() {             player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);         }                  function start() {             if (flvjs.isSupported()) {                 var flvPlayer = flvjs.createPlayer({                     enableWorker:false,                     lazyLoadMaxDuration:3*60,                     enableStashBuffer:false,                     fixAudioTimeStampGap:false,                     autoCleanupSourceBuffer:true,                     isLive:true,                     type: 'flv',                     url: 'http://192.168.0.110:80/flv?port=1935&app=hls&stream=desktop'                 });                 flvPlayer.attachMediaElement(videoElement);                 flvPlayer.load(); //加载                 player.play(); //add             }         }                  document.addEventListener('DOMContentLoaded', function () {             start();           });

        var int1 = self.setInterval("clock()", 5000);         function clock() {           if (this.player.buffered.length) {             let end = this.player.buffered.end(0);//获取当前buffered值             let diff = end - this.player.currentTime;//获取buffered与currentTime的差值             if (diff >= 1.0) {//如果差值大于等于1.0 手动跳帧 这里可根据自身需求来定               //this.player.currentTime = this.player.buffered.end(0)-0.2;//手动跳帧,卡顿               this.player.playbackRate +=0.1;//采用加速方式追帧             }             else                this.player.playbackRate =1.0;                       }        }