使用flv.js实现flv格式的监控视频流播放

2024-06-06 01:23:43

最近在对接海信的监控摄像头，对方返回的监控视频流格式是flv格式，我使用的是flv.js来实现监控播放

一：flv.js

github地址：https://github.com/Bilibili/flv.js

flv.js下载地址：

链接：https://pan.baidu.com/s/15yZ1IMKf1JQPtg4YRIic9w
提取码：w4f3

二：flv.js常用方法

1：flvjs.isSupported()：判断当前浏览器是否支持播放

2：flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：创建一个播放实例

3：flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：将播放实例注册到video节点

4：flvPlayer.load()：加载视频

5：flvPlayer.play()：播放视频

6：flvPlayer.pause()：视频暂停

7：flvPlayer.unload()：去除视频加载

8：flvPlayer.detachMediaElement()：将播放实例从节点中取出

9：flvPlayer.destroy()：销毁播放实例

三：flv.js简单使用

1：html

<video id="my-player" preload="auto" muted autoplay type="rtmp/flv"><source src="">
</video>

2：js

(1)：引入flv.js

 <script src="./flv.js/flv.min.js"></script>

(2)：使用flv.js实现播放flv格式流

// 获取video节点
videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {flvPlayer = flvjs.createPlayer({type: 'flv',isLive: true,url: 'XXXX',//flv格式流地址},{enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。autoCleanupSourceBuffer: true //自动清除缓存});flvPlayer.attachMediaElement(videoElement);flvPlayer.load(); //加载flvPlayer.play();//播放
}

(3)：关闭视频流

flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;

使用flv.js实现flv格式的监控视频流播放相关推荐

vue+flv.js+SpringBoot+websocket实现视频监控与回放
vue+flv.js+SpringBoot+websocket实现视频监控与回放需求:vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之 ...
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
场景 Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流: Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_win nginx-rtmp ...
flv.js及flv.min.js
flv.js及flv.min.js 相关代码下载地址 <script>function flv_load() {console.log('isSupported: ' + flvjs.is ...
使用FFmpeg + nginx + flv.js 实现RTSP格式视频流在web网页进行播放
近期,出于项目需要,要求支持web网页播放RTSP格式的监控视频.因之前并没有相关的项目经验及技术积累.并且H5中的video默认并不支持RTSP格式的视频播放,接下来花了一周时间,都在进行调研和实践 ...
flv.js php,flv.js的使用详解
这次给大家带来flv.js的使用详解,使用flv.js的注意事项有哪些,下面就是实战案例,一起来看一下. Bilibili相信大家都不会陌生,而 Flv.js 就是由 bilibili 网站开源的 H ...
网站上flv，MP4等格式的视频文件播放不出来的解决办法
在做一个网站时,发现视频文件,比如flv,MP4格式在本地可以正常的播放,但是传到了开发机器上,就不行了.播放器的文件地址是对的,就是一直没有反应. 经过长时间的实验,发现问题在与iis的设置问题.i ...
以flv.js框架为基础，替换flv格式视频
flv.js总结这两个月来,开展这个flv.js项目学到的新东西还挺多的,从理解flv.js框架,到理解flv视频格式,到理解公司自己的视频格式,当每一步都理解后,整个过程是比较顺利的,下面是我对这 ...
vue中播放flv格式视频（b站flv.js的使用）
1.下载flv.js npm install --save flv.js 2.引用 import flvjs from 'flv.js/dist/flv.min.js' 完整代码 <templa ...
使用flv.js + websokect播放rtsp格式视频流
1.问题背景在最近的项目中,涉及到海康接入的视频播放的问题,海康这边获取到的视频流是rtsp格式,web端目前没有直接可以播放的组件,于是最开始是后端处理了视频流,返回hls格式的m3u8地址,这样 ...

最新文章

热门文章