关于javascript:使用flvjs实现flv格式的监控视频流播放

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

一:flv.js

github地址:https://github.com/Bilibili/f…

flv.js下载地址:

链接:https://pan.baidu.com/s/15yZ1… 
提取码: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;

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理