1、构建

    /*** @description: 构建播放器* @return {*}* @Author: liuxin*/function flvCreated() {try {const videoElement = flvPlayerVideo.value;if (flvjs.isSupported() && videoElement) {addLog(`flv created,address:${prop.url}`);const flvOption = {url: prop.url, // 播放地址hasAudio: false, // 是否有音频hasVideo: true, //是否有视频isLive: true, // 是否是直播流，默认 truetype: "flv", // 是否是直播流，默认 truestashInitialSize: 128, // 减少首帧显示等待时长...prop.option,};state.flvPlayer = flvjs.createPlayer(flvOption, {enableWorker: false, // 不启用分离的线程进行转换，之前为trueenableStashBuffer: false, // 关闭IO隐藏缓冲区stashInitialSize: 128, // 减少首帧显示等待时长autoCleanupSourceBuffer: true, // 打开自动清除缓存fixAudioTimestampGap: false, //false才会音视频同步,新增lazyLoad: false, // 去掉懒加载,新增});state.flvPlayer.attachMediaElement(videoElement);state.flvPlayer.load();state.flvPlayer.play();state.endedReloadFlag = true; // 重置画面停滞的播放状态，下次停滞了会再次打开videoElementEvent(); // 手动跳帧，防止延时flvPlayerEvent(); // 断流、卡顿处理}} catch (error) {console.error("构建错误", error);}}

2、销毁

    /*** @description: 销毁播放器* @return {*}* @Author: liuxin*/function flvDestory() {if (state.delayTimer) {clearTimeout(state.delayTimer); // 清除推迟打开播放器定时器}if (state.flvPlayer == null) return; // 空对象，不执行销毁/* ----- 销毁开始 ----- */addLog(`flv destory,address:${prop.url}`);try {state.flvPlayer.off(flvjs.Events.ERROR, errorHandle);if (state.flvPlayer._hasPendingLoad) {state.flvPlayer.pause();state.flvPlayer.unload();}state.flvPlayer.detachMediaElement();state.flvPlayer.destroy();state.flvPlayer = null;} catch (error) {console.error("销毁错误");}}

3、断流、卡顿重连

      state.flvPlayer.on(flvjs.Events.STATISTICS_INFO, statisticsInfoHanle); // 断流重连/*** @description: 视频卡顿，销毁后重建* @param {*} errorType* @param {*} errorDetail* @param {*} errorInfo* @return {*}* @Author: liuxin*/function statisticsInfoHanle(res) {// 初始化播放if (state.lastDecodedFrame == 0) {state.lastDecodedFrame = res.decodedFrames;return;}// 正常播放if (state.lastDecodedFrame != res.decodedFrames) {state.lastDecodedFrame = res.decodedFrames;state.loading = false; // 去掉loading动画state.errorCount = 0; // 错误连接次数归0}// 播放异常else {if (state.player) {addLog(`Reconnect after video freezes, address:${prop.url}`); // 添加日志state.errorCount = 0; // 错误连接次数归0state.lastDecodedFrame = 0; // 最后播放编码号flvDestory(); // 销毁对象flvCreated("statistics_info"); // 创建对象}}}

4、报错、停滞重连

      state.flvPlayer.on(flvjs.Events.ERROR, errorHandle); // 监听出错消息后，销毁后重连state.flvPlayer.on(flvjs.Events.LOADING_COMPLETE, errorHandle); // ctrl+f5刷新，会莫名因为停止end不播放/*** @description: 错误回调事件* @param {*} errorType* @param {*} errorDetail* @param {*} errorInfo* @return {*}* @Author: liuxin*/function errorHandle() {//视频出错后销毁重新创建 网络错误if (state.flvPlayer && state.errorCount <= state.maxReconnectCount) {addLog(`Video error ${state.errorCount} reconnection,address:${prop.url}`); // 视频报错N重连state.loading = true; // 添加loading动画state.errorCount++; //错误重连次数+1flvDestory();flvCreated("ERROR");}if (state.errorCount > state.maxReconnectCount) {state.loading = false; // 去掉loading}}

5、累计延时处理

     /*** @description: 浏览器下载流事件，手动跳帧，防止累计延时* @return {*}* @Author: liuxin*/videoElement.onprogress = (e) => {// 不需要跳帧，如：异常视频   或者没有数据流，则不进行跳帧if (!prop.isBufferedEnd || state.flvPlayer.buffered.length <= 0) {return;}state.loading = false;/* ----- 跳帧操作 ----- */let end = state.flvPlayer.buffered.end(0); //获取当前时间值let diff = end - state.flvPlayer.currentTime; //获取相差差值// 延迟过大或帧率不正常，通过跳帧的方式更新视频if (diff > 20 || diff < 0) {// addLog(`Manual frame skipping,address:${prop.url}`); // 添加日志state.flvPlayer.currentTime = state.flvPlayer.buffered.end(0) - 0.5; // 手动跳帧到最后return;}// 正常帧率，正常播放if (diff <= 1) {videoElement.playbackRate = 1;}// 10秒内的延时，1.1倍速播放else if (diff <= 10) {// addLog(`Chase frames manually 1.1,address:${prop.url}`); // 手动追帧videoElement.playbackRate = 1.1;}// 20秒内的延时，1.2倍速播放else if (diff <= 20) {// addLog(`Chase frames manually 1.2,address:${prop.url}`); // 手动追帧videoElement.playbackRate = 1.2;}};

6、手动全屏

    /*** @description: 全屏 / 退出全屏* @return {*}* @Author: liuxin*/function fullscreenHandle() {state.isFlullscreen = !state.isFlullscreen;document.addEventListener("keydown", function (e) {//此处填写你的业务逻辑即可if (e.key == "Escape") {e.stopPropagation();state.isFlullscreen = false;}});}

vue3使用flv.js播放推流视频，完整版组件相关推荐

videojs-flvjs：video.js + flv.js播放m3u8和flv视频
videojs-flvjs是video.js的扩展,让video.js支持flv.js播放器,可以在video.js的techOrder里配置flvjs播放器. 下面做了一个切换m3u8和flv直播流 ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
Web端直接播放 .ts 视频及mux.js播放ts视频没有声音
最近项目中需要前端播放 .ts 格式视频,捣鼓了几天学习到很多知识,也发掘了一种优秀的解决方案,分享给有同样需求的同学. 常见方案在网上查找的大部分解决方案都是用诸如videojs等网页播放器,接收 ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
flv.js 播放多个rtsp流【二】
flv.js 播放多个rtsp流[二] ①添加模板 <template><div><video class="demo-video" ref=&quo ...
python教程视频完整版-Python教程视频完整版
原标题:Python教程视频完整版 Python是由 Guido van Rossum 在八十年代末和九十年代初,在荷兰国家数学和计算机科学研究所设计出来的.随着人工智能的发展,Python这门语言也 ...
老男孩Python全栈9期视频完整版
老男孩Python全栈9期视频完整版 B站:更新最快,内容最全(现已上传完毕,欢迎来撩) https://www.bilibili.com/video/av28244491/ # 第一部分:基础+模块 ...
flv.js播放视频时遇到的问题
文章目录前言一.报错二.原因三.方案前言 rtsp流通过ffmpeg+nginx-http-flv转成rtmp以及http-flv流,并通过flv.js在页面播放,带有音频的流出现播放不了问 ...
整合SpringBoot + Nginx-http-flv-module + JavaCV(FFmpeg) RTSP推流，使用VUE + Flv.js播放
目录 1.安装nginx-rtmp-module 2.Maven引入JavaCV包 3.编写Java核心代码 4.VUE安装video.js和flv.js 5.编写前端测试代码 6.运行效果 1.安装 ...

vue3使用flv.js播放推流视频，完整版组件

1、构建

2、销毁

3、断流、卡顿重连

4、报错、停滞重连

5、累计延时处理

6、手动全屏

vue3使用flv.js播放推流视频，完整版组件相关推荐

最新文章

热门文章