大家好，又见面了，我是你们的朋友全栈君。
关于使用flvjs
文章目录
- 关于使用flvjs
- 1.创建
- 2.事件处理
- 3.踩到的坑
1.创建
HTML
代码语言：javascript复制 <video id="largeVideo" style="width: 100%; height: 600px" class="centeredVideo" controls autoplay muted width="1015" height="576" >
Your browser is too old which doesn't support HTML5 video.
</video>Jetbrains全家桶1年46，售后保障稳定
javascript
代码语言：javascript复制 let flvPlayerRef1 = document.getElementById("largeVideo");//获取创建dom
let flvPlayerObjM1 = flvjs.createPlayer(
{
type: "flv",
isLive: true, //是否直播
url: url, //地址
hasAudio: true,
hasVideo: true,
},
{
cors: true, // 是否跨域
stashInitialSize: 384, // 缓存大小(kb) 默认384kb
enableStashBuffer: true, // 是否启用缓存
autoCleanupMaxBackwardDuration: 3 * 60,//自动清除缓存时间
enableWorker: false, // 是否多线程工作
autoCleanupSourceBuffer: true, // 是否自动清理缓存
fixAudioTimestampGap: true,//音视频同步
}
flvPlayerObjM1.load(); //加载
flvPlayerObjM1.play(); //播放2.事件处理
flvjs.Events.STATISTICS_INFO 信息出错销毁直播流
代码语言：javascript复制flvPlayerRef1.on(flvjs.Events.STATISTICS_INFO, function (res) {
flvPlayerObjM1.pause();
flvPlayerObjM1.unload();
flvPlayerObjM1.detachMediaElement();
flvPlayerObjM1.destroy();
flvPlayerObjM1 = null;
});flvjs.Events.ERROR 断流报错销毁
代码语言：javascript复制flvPlayerRef1.on(
flvjs.Events.ERROR,
(errorType, errorDetail, errorInfo) => {
console.log("errorType:", errorType);
console.log("errorDetail:", errorDetail);
console.log("errorInfo:", errorInfo);
flvPlayerObjM1.pause();
flvPlayerObjM1.unload();
flvPlayerObjM1.detachMediaElement();
flvPlayerObjM1.destroy();
flvPlayerObjM1 = null;
}
);flvjs.Events.VIDEO_FROZEN视频卡顿监听
代码语言：javascript复制flvPlayerRef1.on(
flvjs.Events.VIDEO_FROZEN,
(errorType, errorDetail, errorInfo) => {
console.log("errorType:", errorType);
console.log("errorDetail:", errorDetail);
console.log("errorInfo:", errorInfo);
flvPlayerObjM1.pause();
flvPlayerObjM1.unload();
flvPlayerObjM1.detachMediaElement();
flvPlayerObjM1.destroy();
flvPlayerObjM1 = null;
}
);将创建写入方法，在事件监听中调用可以实现断流重连，卡顿重连等问题
3.踩到的坑
当使用创建时，记住每次都需要销毁当前创建的直播流，是整个都需要销毁，不然很容易造成内存溢出，直接导致浏览器卡死，在断流重连和卡顿修复的时候尤其注意是否完全销毁这个直播组件！！！
新加 flv传入的url最好遵循同源策略，不要跨协议去请求。如果是用rtmp可以不考虑此处
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/234853.html原文链接：https://javaforall.cn
