使用flv.js實現flv格式的監控視訊流播放

huaweichenai發表於2021-10-30
原文網址 : https://segmentfault.com/a/1190000040886956
JS

最近在對接海信的監控攝像頭，對方返回的監控視訊流格式是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;

相關文章