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

daqinzl

已于 2022-01-22 11:15:58 修改

阅读量9.2k

点赞数 3

分类专栏： js 流媒体文章标签： flv.js 累积延时断流重连画面卡顿

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

本文链接：https://blog.csdn.net/daqinzl/article/details/122634323

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

流媒体

9 篇文章 0 订阅

订阅专栏

本文参考了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.player.detachMediaElement();
this.player.destroy();
this.player= null;
this.createPlayer(videoElement, this.url);
}
}
});

完整的flv播放的html页面

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.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;
}
</style>
</head>

<body>
<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>
<br>
<div class="controls">
<button οnclick="flv_load()">加载</button>
<button οnclick="flv_start()">开始</button>
<button οnclick="flv_pause()">暂停</button>
<button οnclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button οnclick="flv_seekto()">跳转</button>
</div>
<script src="./dist/flv.min.js"></script>
   <script src="./jquery-3.4.1.min.js"></script>
<script>
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;
}

</script>
</body>

</html>

daqinzl

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
flv.js--播放直播流时出现的累积延迟、断流重连以及画面卡顿的解决方法

本文参考了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="video...
复制链接

扫一扫

专栏目录