一、使用步骤

1.引入库

代码如下（示例）： npm install --save flv.js 下载flv依赖

导入:import flvjs from "flv.js";

2.读入数据

使用video标签引入<videoid="videoElement"controlsautoplaymutedcontrolsList="nodownload":disablePictureInPicture="true"v-show="conditions"style="width: 100%; height: 100%; object-fit: fill"></video>

1.获取视频流地址并使用

     createVideo() {getCameraVideoAPI({ cameraId: id }).then((res) => {if (res.success) {const that = this;this.flvPlayerList = [];if (flvjs.isSupported()) {var videoElement = document.getElementById("videoElement");videoElement.addEventListener("click", mouseHandler, false);function mouseHandler(event) {event.preventDefault();}//这个我是用来防止用户点击，可不加that.flvPlayer = flvjs.createPlayer({type: "flv",url: res.result,isLive: true,hasAudio: false, // 关闭声音reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等// cors: true,enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区autoCleanupSourceBuffer: true, //对SourceBuffer进行自动清理缓存autoCleanupMaxBackwardDuration: 12, //    当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理autoCleanupMinBackwardDuration: 60, //指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。stashInitialSize: 128, // 缓存大小(kb)  默认384kbfixAudioTimestampGap: false,});this.flvPlayer.attachMediaElement(videoElement);// this.flvPlayer.attachMediaElement(document.getElementById('videojs-player' + model.index + "_" + this.pageId));that.flvPlayer.load();that.flvPlayer.play(); //不用打开that.flvPlayerList.push(that.flvPlayer);}}});},

2.有一个问题就是同时只能播放6个视频，超出6个视频会加载不出来，需要摧毁上一个视频，关闭视频的时候调用这个方法就好

    //销毁视频实例destoryVideo() {if (this.flvPlayerList.length) {this.flvPlayerList.forEach((item) => {console.log(item);item.unload();item.detachMediaElement();});}if (this.flvPlayer) {this.flvPlayer.unload();this.flvPlayer.detachMediaElement();this.flvPlayer.destroy();this.flvPlayer = null;}},

3.还有一个就是，flv视频在谷歌浏览器播放，如果你离开页面他会暂停在那，回来会从暂停的时间进行播放，所以为了解决这个，就监测用户进入离开，进入时重新调取视频，离开就销毁

  mounted() {document.addEventListener("visibilitychange", this.handleVisiable);},destroyed() {this.destoryVideo();document.removeEventListener("visibilitychange", this.handleVisiable);//清除计时器},methods: {//离开页面回来刷新视频handleVisiable(e) {switch (e.target.visibilityState) {case "prerender":// console.log("网页预渲染，内容不可见");break;case "hidden":// console.log("内容不可见，处理后台、最小化、锁屏状态");this.destoryVideo();break;case "visible":this.createVideo();break;}},
}

总结

okk就这样了

vue+flv.js实现视频播放相关推荐

vue + flv.js 实现多视频播放
vue + flv.js 实现多视频直播安装video.js $ npm install flv.js 页面使用 <template><div class="box&qu ...
vue+flv.js+SpringBoot+websocket实现视频监控与回放
vue+flv.js+SpringBoot+websocket实现视频监控与回放需求:vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之 ...
整合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.安装 ...
【Vue】播放flv格式视频（flv.js视频播放器）
图片来源:HTTP-FLV直播初探链接 github地址:GitHub - bilibili/flv.js: HTML5 FLV Player 播放flv格式视频 npm install flv.j ...
flv.js视频播放库基本用法
安装 npm install --save flv.js 基本用法 player 对象源码可查看有哪些方法和属性若需要支持 flv 回放功能请使用 mpegts.js 假设存在一个 video 元 ...
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
场景 Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流: Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_win nginx-rtmp ...
video.js 视频截图、录制、自定义全屏，hls、flv、mp4视频播放
功能 video.js内嵌截图.录制功能 (图片.视频会下载到本地) 自定义全屏播放hls.flv.mp4 功能集合成Vue组件参考 video.js components RecordRTC ...
vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
视频播放器之vueplayer和flv.js
1.flv.js 项目接入了海康的flv实时视频流(摄像头监控) npm install --save flv.js <video controls autoplay="autopla ...

vue+flv.js实现视频播放

一、使用步骤

1.引入库

2.读入数据

总结

vue+flv.js实现视频播放相关推荐

最新文章

热门文章