Flv.js 是 HTML5 Flash 視頻（FLV）播放器，純原生 JavaScript 開發(fā)，沒有用到 Flash。由 bilibili 網站開源。它的工作原理是將 FLV 文件流轉碼復用成 ISO BMFF（MP4 碎片）片段，然后通過 Media Source Extensions 將 MP4 片段喂進瀏覽器。

媒體部分

配置

flv.js常用方法

1：flvjs.isSupported()：判斷當前瀏覽器是否支持播放

2：flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：創(chuàng)建一個播放實例

3：flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：將播放實例注冊到video節(jié)點

4：flvPlayer.load()：加載數據流

5：flvPlayer.play()：播放數據流

6：flvPlayer.pause()：暫停播放數據流

7：flvPlayer.unload()：取消數據流加載

8：flvPlayer.detachMediaElement()：將播放實例從節(jié)點中取出

9：flvPlayer.destroy()：銷毀播放實例

flv.js簡單使用

1：html

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

2：js

(1)：在index.xml文件中引入flv.js

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

(2)：使用flv.js實現播放flv格式流，獲取video節(jié)點

videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {
    flvPlayer = flvjs.createPlayer({
        type: 'flv',					//媒體類型
        url: 'XXXX'						//flv格式媒體URL
        isLive: true,					//數據源是否為直播流
        hasAudio: false,				//數據源是否包含有音頻
	    hasVideo: true,					//數據源是否包含有視頻
	    enableStashBuffer: false		//是否啟用緩存區(qū)
    },{
        enableWorker: false, 			//不啟用分離線程
        enableStashBuffer: false, 		//關閉IO隱藏緩沖區(qū)
        autoCleanupSourceBuffer: true 	//自動清除緩存
    });
    flvPlayer.attachMediaElement(videoElement);	//將播放實例注冊到節(jié)點
    flvPlayer.load(); 					//加載數據流
    flvPlayer.play();					//播放數據流
}

(3)：關閉視頻流

flvPlayer.pause();						//暫停播放數據流							
flvPlayer.unload();						//取消數據流加載
flvPlayer.detachMediaElement();			//將播放實例從節(jié)點中取出
flvPlayer.destroy();					//銷毀播放實例

到此這篇關于flv.js的具體使用教程的文章就介紹到這了,更多相關flv.js使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: