flv.js的具體使用教程

更新時間：2023年05月10日 10:55:30 投稿：zx

flv.js是一款優(yōu)秀的開源web端flv文件播放器，flv格式目前廣泛應用在直播及音視頻錄制領(lǐng)域，本文就詳細的介紹一下flv.js的具體使用教程，感興趣的可以了解一下

簡介

Flv.js 是 HTML5 Flash 視頻（FLV）播放器，純原生 JavaScript 開發(fā)，沒有用到 Flash。由 bilibili 網(wǎng)站開源。它的工作原理是將 FLV 文件流轉(zhuǎn)碼復用成 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()：加載數(shù)據(jù)流

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

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

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

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實現(xiàn)播放flv格式流，獲取video節(jié)點

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

(3)：關(guān)閉視頻流

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

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

您可能感興趣的文章: