大家好，欢迎来到IT知识分享网。
学习网址
Flv.js文档使用随记
https://www.cnblogs.com/zhifa/p/13252838.html?msclkid=7445aaffc60f11ecadc47c89669e96a4
flv.js直播拉流场景下的技术优化
https://blog.csdn.net/epubcn/article/details/103071953
Flv.js全面解析
https://blog.csdn.net/An1090239782/article/details/108972491源代码下载
flv-js的gitee地址
https://gitee.com/mirrors/flv-js
进入"标签"
下载最新版本:flv-js-v1.6.2.zip
发现下载的master版本和v1.6.2版本代码一样编译
实先安装好npm命令:
https://nodejs.org/en/
下载安装node.js
安装好后，就可以用npm命令了
第1步: npm ci # install dependencies / dev-dependences
第2步: debug 和release版本编译
npm run build:debug # debug 版本 文件会到/dist文件夹下
npm run build # release 版本 文件会到/dist文件夹下问题之断线重连
flv.js--播放直播流时出现的累积延迟、断流重连以及画面卡顿的解决方法
https://blog.csdn.net/daqinzl/article/details/122634323问题之DecodeFrames总是没有变化
flvPlayer.on('statistics_info', function (res)
{
//为什么DecodeFrames总是没有变化
curFrameCnt = res.decodedFrames;
//console.log('统计',curFrameCnt);
});
自己使用的html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<title>直播</title>
<style>
.mainContainer {
display: block;
width: 640px;
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: 320px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 10px;
}
.logcatBox {
border-color: #CCCCCC;
font-size: 11px;
font-family: Menlo, Consolas, monospace;
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="mainContainer">
<video name="videoElement" class="centeredVideo" id="videoElement" controls width="640" height="320" autoplay>
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
<script src="flv.min.js"></script>
<script>
if (flvjs.isSupported()) {
startVideo()
}
var flvPlayer;
function startVideo(){
var videoElement = document.getElementById('videoElement');
flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: 'http://10.121.148.200:9981/live/6001080011.live.flv',
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //必须,关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
autoCleanupSourceBuffer: true //自动清除缓存
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
//flvPlayer.play();//不用打开
//flv播放时间越长延迟越长
//必需:获取时间跟不上帧数的问题
setInterval(() => {
if (videoElement.buffered.length)
{
let end = videoElement.buffered.end(0); //获取当前buffered值
let diff = end - videoElement.currentTime; //获取buffered与currentTime的差值
if (diff >= 2.0)
{
//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
//需要1.5秒的缓冲，不然会不断出现卡顿现象
//2.0=1.5 + 0.5,跳帧0.5秒，这样每秒都可以显示出来
videoElement.currentTime = videoElement.buffered.end(0) - 1.5;
}
}
}, 2000); //2000毫秒执行一次
flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
console.log('flv error');
//alert("flv error");
reloadVideo();
});
}
function destoryVideo(){
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;
}
function reloadVideo(){
destoryVideo()
startVideo()
}
</script>
</body>
</html>免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/20902.html
