柚子快報(bào)邀請(qǐng)碼778899分享：前端 flv.js的具體使用

http://yzkb.51969.com/

目錄

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

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

簡(jiǎn)單示例

簡(jiǎn)介

Flv.js 是 HTML5 Flash 視頻（FLV）播放器，純?cè)?JavaScript 開(kāi)發(fā)，沒(méi)有用到 Flash。由 bilibili 網(wǎng)站開(kāi)源。

常見(jiàn)直播協(xié)議

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

Flv.js概覽

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

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

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

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

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

參數(shù)配置

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

mediaDataSource

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

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

用白話說(shuō)就是如果指定了segments字段那么之前指定的duration filesize url字段就不再生效了，將標(biāo)志這是一個(gè)多片段合成一個(gè)的視頻，進(jìn)度條的總時(shí)長(zhǎng)就等于各片段相加的和，所以每個(gè)片段的duration filesize一定要指定準(zhǔn)確。

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

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

配置

config

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

常用方法

客戶端控制

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

事件觸發(fā)

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

狀態(tài)獲取

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

簡(jiǎn)單示例

柚子快報(bào)邀請(qǐng)碼778899分享：前端 flv.js的具體使用

http://yzkb.51969.com/

文章來(lái)源