8

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

 2 years ago
source link: https://segmentfault.com/a/1190000040886956
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

最近在对接海信的监控摄像头,对方返回的监控视频流格式是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>

(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;

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK