flv.js在vue中的使用

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

使用方法

<template><div class="video" :style="{ height: voidHeight }"><video ref="videoElement"  muted controls autoplay controlslist="nodownload noplaybackrate noremoteplayback" disablePictureInPicture="true" v-if="!imgError"></video><div class="img_error" v-if="imgError"><p>无法连接相关设备</p></div></div>
</template><script>
import flvjs from "flv.js";
export default {name: "assemblyFlv",props: ["url", "height", "destroy","playon"], // 视频流路径，播放器高度，是否销毁播放器data() {return {flvPlayer: "",imgError: false,voidHeight: "",playOn:true};},mounted() {// 判断是否传入高度，如果没有，高度100%this.height ? (this.voidHeight = this.height) : (this.voidHeight = "100%");// 页面加载完成后，初始化this.$nextTick(() => {this.init(this.url);});},methods: {// 初始化init(source) {if (flvjs.isSupported()) {this.flvPlayer = flvjs.createPlayer({type: "flv",url: source,isLive: true,},{enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。autoCleanupSourceBuffer: true, //自动清除缓存});var videoElement = this.$refs.videoElement;this.flvPlayer.attachMediaElement(this.$refs.videoElement);if (this.url !== "" && this.url !== null) {this.flvPlayer.load();//this.flvPlayer.play();setTimeout(() => { this.flvPlayer.play(); }, 100);// 加载完成this.flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {this.imgError = false;});// 加载失败this.flvPlayer.on(flvjs.Events.ERROR,() => {if (this.flvPlayer) {this.reloadVideo(this.flvPlayer);}else{this.imgError = true;}},(error) => {console.log(error);});this.flvPlayer.on(flvjs.Events.STATISTICS_INFO, (res) =>{if(this.playon != false){if (this.lastDecodedFrame == 0) {this.lastDecodedFrame = res.decodedFrames;console.log(this.lastDecodedFrame)return;}if (this.lastDecodedFrame != res.decodedFrames) {this.lastDecodedFrame = res.decodedFrames;} else {this.lastDecodedFrame = 0;console.log('卡住重连')if (this.flvPlayer) {this.reloadVideo(this.flvPlayer);console.log('卡住重连完成')}}}});videoElement.addEventListener("progress", () => {if(videoElement.buffered.length != 0){let end = videoElement.buffered.end(0); //获取当前buffered值(缓冲区末尾)let delta = end - videoElement.currentTime; //获取buffered与当前播放位置的差值// 延迟过大，通过跳帧的方式更新视频if (delta > 10 || delta < 0) {this.flvPlayer.currentTime = this.flvPlayer.buffered.end(0) - 1;console.log('跳帧')return;}// 追帧if (delta > 1) {videoElement.playbackRate = 1.1;console.log('追帧')} else {videoElement.playbackRate = 1;console.log('正常')}}});// 点击播放按钮后，更新视频videoElement.addEventListener("play", () => {if(videoElement.buffered.length > 0){let end = videoElement.buffered.end(0) - 1;this.flvPlayer.currentTime = end;console.log('播放最新')}});// 网页重新激活后，更新视频window.onfocus = () => {if(videoElement.buffered.length > 0){let end1 = videoElement.buffered.end(0) - 1;this.flvPlayer.currentTime = end1;console.log('页面切换')}};}} else {this.imgError = true;}},//断线重连reloadVideo(flvPlayer) {this.detachMediaElement();this.init(this.url);console.log('断线重连')},// 销毁detachMediaElement() {this.flvPlayer.pause();this.flvPlayer.unload();this.flvPlayer.detachMediaElement();this.flvPlayer.destroy();this.flvPlayer = "";},},watch: {url() {this.imgError = false;// 切换流之前，判断之前的流是否销毁this.flvPlayer == "" ? "" : this.detachMediaElement();// 初始化this.init(this.url);},destroy() {// 传入开关值if (this.destroy) {this.init(this.url);} else {this.flvPlayer == "" ? "" : this.detachMediaElement();}},playon() {this.reloadVideo(this.flvPlayer);}},beforeDestroy() {this.detachMediaElement();},
};
</script><style scoped>
.video {position: relative;height: 100%;
}
.video video {width: 100%;height: 100%;object-fit: fill;
}
.video video::-webkit-media-controls-play-button{display: none;
}
.video video::-webkit-media-controls-toggle-closed-captions-button {display: none;
}
.video video::-webkit-media-controls-timeline {display: none;
}
.video video::-webkit-media-controls-current-time-display {display: none;
}
.video video::-webkit-media-controls-time-remaining-display {display: none;
}
.img_error {position: absolute;top: 30%;left: 50%;margin-left: -120px;text-align: center;
}
.img_error > img {margin-bottom: 1em;
}
.img_error > p {color: #00fdff;font-weight: bold;font-size: 1.2em;
}
</style>

封装：

 子组件封装：

<template><div class="video-container"><video ref="videoElement" class="centeredVideo" controls autoplay muted></video>  </div>
</template><script>
import flvjs from "flv.js";  //引入flv
export default {props: {url : String,},data() {return {// src: ["http://172.21.1.111/live?port=1935&app=myapp&stream=streamname"],};},mounted() {this.flv_load(this.url);},methods: {flv_load(url) {if (flvjs.isSupported()) {let videoElement = this.$refs.videoElement;this.flvPlayer = flvjs.createPlayer({type: "flv", //媒体类型url: url, //flv格式媒体URLisLive: true, //数据源是否为直播流hasAudio: false, //数据源是否包含有音频hasVideo: true, //数据源是否包含有视频enableStashBuffer: false, //是否启用缓存区},{enableWorker: false, // 是否启用分离的线程进行转换enableStashBuffer: false, //关闭IO隐藏缓冲区autoCleanupSourceBuffer: true, //自动清除缓存});this.flvPlayer.attachMediaElement(videoElement); //将播放实例注册到节点this.flvPlayer.load(); //加载数据流this.flvPlayer.play(); //播放数据流}},},
};
</script><style scoped>
/* .video-container {display: inline-block;margin-right: 10px;width: 32%;height: 45%;
} */
.centeredVideo {width: 100%;
}
</style>

父组件调用：

<template><el-card class="box-card"><div class="flvbox" v-for="(item,index) in src" :key="index"><!-- <VideoFlv url="http://172.21.1.111/live?port=1935&app=myapp&stream=streamname" /> --><VideoFlv :url="item" /></div></el-card>
</template><script>
import VideoFlv from "./VideoFlv.vue";
export default {components:{VideoFlv},data() {return {src: ["https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv","https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv","https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv","https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv","http://172.21.1.111/live?port=1935&app=myapp&stream=streamname","https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",],};},
};
</script><style scoped>
.flvbox {display: inline-block;margin-right: 10px;width: 32%;
}
</style>

因为视频需要实时的 后边发现上边写法暂停之后和切换页面之后 会有延迟 所以开发让新加个刷新按钮 也已满足  然后这个api的写法我尝试很多 追帧啊 更新视频啊 都没生效  父组件重新传值 因为值没有变化 所以也没有重新渲染  所以用到了key 属性 vue每次渲染的时候会去拿这个key 值做对比，如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素，否则保持上一次的元素状态。所以我用了一个时间戳方法

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/140403.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

​《水经注全国三维离线GIS系统》硬件安装教程

​《水经注全国三维离线GIS系统》硬件安装教程

有些工作&#xff0c;是需要一些外在动力才能完成的。 为什么这么讲呢&#xff1f; 因为正是在客户的要求下&#xff0c;我们才撰写了《水经注全国三维离线GIS系统》的硬件安装教程&#xff0c;而且还录制了视频教程。 当用户收到货物以后&#xff0c;就可以通过本教程清点货…
阅读更多...
信驰达科技加入车联网联盟(CCC)，推进数字钥匙发展与应用

信驰达科技加入车联网联盟(CCC)，推进数字钥匙发展与应用

CCC)的会员。 图 1 深圳信驰达正式成为车联网联盟(CCC)会员 车联网联盟(CCC)是一个跨行业组织&#xff0c;致力于推动智能手机与汽车连接解决方案的技术发展。CCC涵盖了全球汽车和智能手机行业的大部分企业&#xff0c;拥有150多家成员公司。CCC成员公司包括智能手机和汽车制造…
阅读更多...
Springboot+vue的人力资源管理系统（有报告）。Javaee项目，springboot vue前后端分离项目

Springboot+vue的人力资源管理系统（有报告）。Javaee项目，springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的人力资源管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的企业资产管理系统&#xff0c;采用M&#xff08;model&…
阅读更多...
react+星火大模型，构建上下文ai问答页面（可扩展）

react+星火大模型，构建上下文ai问答页面（可扩展）

前言 最近写的开源项目核心功能跑通了&#xff0c;前两天突发奇想。关于项目可否介入大模型来辅助用户使用平台&#xff0c;就跑去研究了最近比较活火的国内大模型–讯飞星火大模型。 大模型api获取 控制台登录 地址&#xff1a;https://console.xfyun.cn/app/myapp 新建应…
阅读更多...
迅为龙芯2K1000开发板虚拟机ubuntu启动root用户

迅为龙芯2K1000开发板虚拟机ubuntu启动root用户

作为嵌入式开发人员&#xff0c;系统的所有权限都要为我们打开&#xff0c;所以我们不必像运维那样&#xff0c;对 root 用户非常敏感&#xff0c;所以安装完 ubuntu 系统以后&#xff0c;我们要启用 root 用户。 首先我们打开 ubuntu 控制终端&#xff0c;然后在终端里面输入…
阅读更多...
[SOC] MBIST (Memory Built-In Self Test) and Memory Built-in Self Repair (BISR)

[SOC] MBIST (Memory Built-In Self Test) and Memory Built-in Self Repair (BISR)

存储器构成了 VLSI 电路的很大一部分。存储系统设计的目的 是存储大量数据。[1] 存储器不包括逻辑门和触发器。因此&#xff0c;需要不同的故障模型和测试算法来测试存储器。 MBIST 是一种自测试和修复机制&#xff0c;它通过一组有效的算法来测试存储器&#xff0c;以检测典型…
阅读更多...
【阿里云】任务2-OSS对象存储教程（找我参加活动可获得京东卡奖励）

【阿里云】任务2-OSS对象存储教程（找我参加活动可获得京东卡奖励）

目录 前言说明第一步第二步第三步&#xff1a;开通并使用OSS传输加速三、清理第四步-提交作品第五步-提交记录到小程序 前言 本次任务是阿里云官方发出的&#xff0c;每个任务30软妹币&#xff0c;欢迎大家加入我的活动群&#xff0c;门槛很低&#xff0c;所有人都可以参加&…
阅读更多...
代码随想录算法训练营第五十天丨 动态规划part13

代码随想录算法训练营第五十天丨 动态规划part13

300.最长递增子序列 思路 首先通过本题大家要明确什么是子序列&#xff0c;“子序列是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序”。 本题也是代码随想录中子序列问题的第一题&#xff0c;如果没接触过这种…
阅读更多...
能跟“猫主子”聊天了！生成式AI最快5年内破译第一种动物语言

能跟“猫主子”聊天了！生成式AI最快5年内破译第一种动物语言

image.png ChatGPT用它自己的方式来理解世界&#xff0c;类似的技术是否也能用来学习动物的语言&#xff1f; 所罗门能够与动物交流并不是因为他拥有魔法物品&#xff0c;而是因为他有观察的天赋。 ——康拉德・劳伦兹《所罗门王的指环》 在《狮子王》、《疯狂动物城》等以动…
阅读更多...
Java通过JNI技术调用C++动态链接库的helloword测试

Java通过JNI技术调用C++动态链接库的helloword测试

JNI调用原理 原理就不细说了&#xff0c;其实就是写个库给Java调&#xff0c;可以百度一下Java JNI&#xff0c;下面是HelloWorld代码测试 编写一个本地测试类 package com.my.study.cpp_jni;/*** 测试Java调用C库* <p>使用命令javac -h . NativeTest.java自动生成C头…
阅读更多...
红海云签约湘湖实验室，助力科研机构人力资源数字化全面升级

红海云签约湘湖实验室，助力科研机构人力资源数字化全面升级

湘湖实验室&#xff08;农业浙江省实验室&#xff09;是由浙江省农业科学院和萧山区人民政府共同举办的新型研发机构&#xff0c;定位为农业核心种质资源生物制造与生物互作科学问题和核心技术研究&#xff0c;瞄准世界农业科技发展前沿&#xff0c;面向国家重大战略&#xff0…
阅读更多...
Ubuntu(WSL2) mysql8.0.31 源码安装

Ubuntu(WSL2) mysql8.0.31 源码安装

要在 Ubuntu 上使用调试功能安装 MySQL 8.0 的源码&#xff0c;可以按照以下详细步骤进行操作&#xff1a; 1. 更新系统 首先&#xff0c;确保你的 Ubuntu 系统是最新的。运行以下命令更新系统软件包&#xff1a; sudo apt update sudo apt upgrade 2. 下载 MySQL 源码 访…
阅读更多...
通讯协议学习之路(实践部分)：UART开发实践

通讯协议学习之路(实践部分)：UART开发实践

通讯协议之路主要分为两部分&#xff0c;第一部分从理论上面讲解各类协议的通讯原理以及通讯格式&#xff0c;第二部分从具体运用上讲解各类通讯协议的具体应用方法。 后续文章会同时发表在个人博客(jason1016.club)、CSDN&#xff1b;视频会发布在bilibili(UID:399951374) 本文…
阅读更多...
gpt支持json格式的数据返回（response_format: ‘json_object‘）

gpt支持json格式的数据返回（response_format: ‘json_object‘）

Api.h5.chatCreateChatCompletion({model: gpt-3.5-turbo-1106,token: sk-f4fe8b67-fcbe-46fd-8cc9-fd1dac5d6d59,messages: [{role: user,content:使用json格式返回十二生肖&#xff0c;包含中文名和英文名&#xff0c;[{id:"1", enName:"", cnName: &quo…
阅读更多...
初始MySQL(二)(表的增删查改)

初始MySQL(二)(表的增删查改)

目录 修改表 CRUD(增删改查) insert语句(表中增加数据) update语句(修改表中的数据) delete删除语句 select语句 修改表 添加列 ALTER TABLE tablename ADD (column datatype [DEFAULT expr] [, column datatype] ...); 修改列 ALTER TABLE tablename MODIFY (column …
阅读更多...
ROS机器人毕业论文数量井喷-数据日期23年11月13日

ROS机器人毕业论文数量井喷-数据日期23年11月13日

背景 ROS机器人论文数量在近3年井喷发展&#xff0c;仅硕士论文知网数据库可查阅就已经达到2264篇&#xff0c;实际相关从业者远远远大于这个数值。 按日期排序&#xff0c;每页20篇&#xff0c;23年还未结束&#xff0c;检索本身也不一定完备&#xff0c;就超过200。 相关从业…
阅读更多...
语音识别芯片在产品应用上的难点列举

语音识别芯片在产品应用上的难点列举

语音识别技术&#xff0c;作为人工智能领域中的一颗璀璨明珠&#xff0c;已经广泛应用于用户交互、智能家居、语音助手等多个领域。它为我们的生活带来了诸多便利&#xff0c;使得我们可以更加高效地与电子设备进行互动。然而&#xff0c;语音识别技术的实现&#xff0c;依赖于…
阅读更多...
PostgreSQL 入门教程

PostgreSQL 入门教程

PostgreSQL 入门教程 1. 历史背景2. 概念3. 特点4. 用法4.1 数据库连接4.2 数据库创建4.3 表创建4.4 数据插入4.5 数据查询4.6 数据更新4.7 数据删除 5. 安装步骤6. 简单示例7. 扩展7.1 数据类型7.2 查询优化7.3 并发控制7.4 数据备份和恢复7.5 扩展性和高可用性7.6 安全性加固…
阅读更多...
pyTorch Hub 系列#2：VGG 和 ResNet

pyTorch Hub 系列#2：VGG 和 ResNet

一、说明 在上一篇教程中，我们了解了 Torch Hub 背后的本质及其概念。然后，我们使用 Torch Hub 的复杂性发布了我们的模型，并通过相同的方式访问它。但是，当我们的工作要求我们利用 Torch Hub 上提供的众多全能模型之一时，会发生什么？ 在本教程中，我们将学习如何利用称为…
阅读更多...
「Verilog学习笔记」4bit超前进位加法器电路

「Verilog学习笔记」4bit超前进位加法器电路

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 timescale 1ns/1nsmodule lca_4(input [3:0] A_in ,input [3:0] B_in ,input C_1 ,output wire CO ,output wire [3:0] …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023