柚子快報邀請碼778899分享：前端 flv.js的具體使用

http://yzkb.51969.com/

目錄

簡介參數(shù)配置媒體數(shù)據(jù)源配置

常用方法客戶端控制事件觸發(fā)狀態(tài)獲取

簡單示例

簡介

Flv.js 是 HTML5 Flash 視頻（FLV）播放器，純原生 JavaScript 開發(fā)，沒有用到 Flash。由 bilibili 網(wǎng)站開源。

常見直播協(xié)議

RTMP: 底層基于TCP，在瀏覽器端依賴Flash。HTTP-FLV: 基于HTTP流式IO傳輸FLV，依賴瀏覽器支持播放FLV。WebSocket-FLV: 基于WebSocket傳輸FLV，依賴瀏覽器支持播放FLV。WebSocket建立在HTTP之上，建立WebSocket連接前還要先建立HTTP連接。HLS: Http Live Streaming，蘋果提出基于HTTP的流媒體傳輸協(xié)議。HTML5可以直接打開播放。RTP: 基于UDP，延遲1秒，瀏覽器不支持。

Flv.js概覽

一個實現(xiàn)了在 HTML5 視頻中播放 FLV 格式視頻的 JavaScript 庫。它的工作原理是將 FLV 文件流轉碼復用成 ISO BMFF（MP4 碎片）片段，然后通過 Media Source Extensions 將 MP4 片段喂進瀏覽器。

flv.js只做了一件事，在獲取到FLV格式的音視頻數(shù)據(jù)后通過原生的JS去解碼FLV數(shù)據(jù)，再通過Media Source Extensions API 喂給原生HTML5 Video標簽。(HTML5 原生僅支持播放 mp4/webm 格式，不支持 FLV)

HTML5 原生僅支持播放 mp4/webm 格式，flv.js 實現(xiàn)了在 HTML5 上播放 FLV 格式視頻。

flv.js在獲取到FLV格式的音視頻數(shù)據(jù)后將 FLV 文件流轉碼復用成 ISO BMFF（MP4 碎片）片段，再通過Media Source Extensions API 傳遞給原生HTML5 Video標簽進行播放。

flv.js 是使用 ECMAScript 6 編寫的，然后通過 Babel Compiler 編譯成 ECMAScript 5，使用 Browserify 打包。

參數(shù)配置

媒體數(shù)據(jù)源

mediaDataSource

字段類型描述typestring媒體類型，‘flv’ 或 ‘mp4’urlstring媒體url，可以以 ‘http(s)’ 或 ‘ws’ 開頭isLiveboolean是否為直播流corsboolean是否啟用 CORS 以進行 http 獲取withCredentialsboolean是否使用 cookie 進行 http fetchinghasAudioboolean是否有音頻hasVideoboolean是否有視頻durationnumber總媒體持續(xù)時間，以毫秒為單位filesizenumber媒體文件的總大小，以字節(jié)為單位segmentsArray< MediaSegment >多部分播放的可選字段，請查閱 MediaSegment

如果segments字段存在，transmuxer將把此MediaDataSource視為多片段源。在多片段模式下，將忽略MediaDataSource結構中的duration filesize url字段。

用白話說就是如果指定了segments字段那么之前指定的duration filesize url字段就不再生效了，將標志這是一個多片段合成一個的視頻，進度條的總時長就等于各片段相加的和，所以每個片段的duration filesize一定要指定準確。

segments字段，接收數(shù)組，類型為MediaSegment， MediaSegment 字段如下

字段類型描述durationnumber必填字段，以毫秒為單位表示段持續(xù)時間filesizenumber可選字段，以字節(jié)為單位表示段文件大小urlstring必填字段，表示分段文件的URL

配置

config

字段類型默認描述enableWorkerbooleanfalse為 transmuxing 啟動分離線程enableStashBufferbooleantrue啟用 IO 存儲緩沖區(qū)。如果需要實時(最小延遲)進行實時流播放，則設為false，但如果存在網(wǎng)絡抖動，則可能會停止stashInitialSizenumber384kb指示 IO 存儲緩沖區(qū)初始大小。表示合適的尺寸可以改善視頻加載/搜索時間isLivebooleanfalse與mediaDataSource中設置的相同，mediaDataSource設置的情況下可不用設置lazyLoadbooleantrue懶加載，如果有足夠的數(shù)據(jù)進行播放，則中止http連接lazyLoadMaxDurationnumber3*60要保留多少秒的數(shù)據(jù) lazyLoadlazyLoadRecoverDurationnumber30以秒為單位指示 lazyLoad 恢復時間邊界deferLoadAfterSourceOpenbooleantrue在 Mediasource sourceopen事件觸發(fā)后加載，sourceopen在Chrome上，在后臺打開的選項卡在切換到該選項卡之前可能不會觸發(fā)autoCleanupSourceBufferbooleanfalse對 SourceBuffer 進行自動清理autoCleanupMaxBackwardDurationnumber3*60當后向緩沖區(qū)持續(xù)時間超過此值（以秒為單位）時，對SourceBuffer進行自動清理autoCleanupMinBackwardDurationnumber2*60執(zhí)行自動清理時為后向緩沖區(qū)保留的持續(xù)時間（以秒為單位）fixAudioTimestampGapbooleantrue當檢測到較大的音頻時間戳間隙時，填充靜音音頻幀以免 a/v 不同步accurateSeekbooleanfalse精確搜索到任何幀，不限于視頻IDR幀，但可能會慢一些。適用于Chrome > 50和 FireFox、SafariseekTypestring‘range’‘range’ 使用范圍請求來尋找，或者 ‘param’ 在url中添加參數(shù)來指示請求范圍seekParamStartstring‘bstart’表示尋找開始參數(shù)名稱 seekType = ‘param’seekParamEndstring‘bend’表示尋找結束參數(shù)名稱 seekType = ‘param’rangeLoadZeroStartbooleanfalse如果使用范圍搜索，則發(fā)送 Range: bytes=0- 首次加載customSeekHandlerobjectundefined表示自定義查找處理程序reuseRedirectedURLbooleanfalse重用 301/302 重定向url用于子序列請求，如搜索、重新連接等referrerPolicystringno-referrer-when-downgrade表示使用FetchStreamLoader時的Referrer Policyheadersobjectundefined指示將添加到請求的其他標頭

常用方法

客戶端控制

isSupported()：boolean：判斷當前瀏覽器是否支持播放 createPlayer(mediaDataSource: MediaDataSource, config?: Config)：創(chuàng)建一個播放實例 play(): void: 開始播放視頻。 pause(): void: 暫停視頻播放。 destroy(): void: 銷毀播放器實例并釋放資源。 attachMediaElement(mediaElement: HTMLVideoElement): void: 綁定HTMLVideoElement 元素并進行播放。 detachMediaElement(): void: 解綁 HTMLVideoElement 元素。 attachMSE(mse: MediaSource): void: 綁定 MediaSource 對象。 detachMSE(): void: 解綁 MediaSource 對象。 load(optional: {reset: boolean}): void: 加載當前流并準備播放，但不自動開始播放。 unload(): void: 卸載當前流。 toggle(): void: 切換播放狀態(tài)。 isPlaying(): boolean: 返回播放器是否正在播放。 getDuration(): number: 返回流總播放時間。 getCurrentTime(): number: 返回當前播放時間。 setCurrentTime(time: number): void: 跳轉到指定時間點進行播放。 getVolume(): number: 返回當前音量。 setVolume(volume: number): void: 設置音量。 mute(): void: 靜音。 unmute(): void: 取消靜音。 getPlaybackRate(): number: 返回播放速率。 setPlaybackRate(rate: number): void: 設置播放速率。

事件觸發(fā)

on(eventType: string, listener: Function): void: 監(jiān)聽指定事件類型并執(zhí)行對應回調函數(shù)。 off(eventType: string, listener: Function): void: 取消對指定事件類型的監(jiān)聽。 once(eventType: string, listener: Function): void: 監(jiān)聽指定事件類型，并在觸發(fā)一次后自動取消監(jiān)聽。

狀態(tài)獲取

getState(): string: 返回當前播放器狀態(tài)。 getNetworkState(): number: 返回當前網(wǎng)絡狀態(tài)。 getReadyState(): number: 返回當前視頻準備狀態(tài)。 getStatisticsInfo(): Object: 返回當前統(tǒng)計信息。 isSeeking(): boolean: 返回是否正在執(zhí)行跳轉操作。 isPaused(): boolean: 返回是否處于暫停狀態(tài)。 isEnded(): boolean: 返回是否已經(jīng)播放結束。 getCurrentBuffer(): number: 返回當前緩沖區(qū)時間。 getLoadedTime(): number: 返回已加載的緩沖區(qū)總時間。 getMediaInfo(): Object: 返回當前媒體信息。

簡單示例

柚子快報邀請碼778899分享：前端 flv.js的具體使用

http://yzkb.51969.com/

文章來源