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

原创

已于 2022-01-22 11:15:58 修改 · 1w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#flv.js #累积延时 #断流重连 #画面卡顿

于 2022-01-22 11:11:40 首次发布

本文介绍如何使用FLV.js播放器实现稳定的流媒体播放体验，包括错误处理、断流重连及解决画面卡顿等问题的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

解决延迟见

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

断流重连

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

player的定义

<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls muted autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>

代码如下:

$('#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.playe