Flv.js文件使用隨記

之乏發表於2020-07-06
JS

關鍵字：Flv.js | Flv js | Flv-js | HTML5 FLV Player |

0x001: 前言
以下涉及到 flv.js 所有內容均是V1.5.0版本內的，如方法、屬性、常量、監聽等等，不討論視訊編解碼，只陳述官方文件內容。採用文字+圖片形式，單文字描述怕不好理解，單圖片模式又怕將來哪天會掛掉，現在很多年份久的博文就有這情況，也不是沒遇到過。非前端工作者，部分術語可能描述不得當，望理解。純手碼字一下午，只是為了時間久後遺忘再回來看一下。

0x002: 架構圖

 



0x003: API文件相關內容

flvjs.isSupported()


// 檢視當前瀏覽器是否支援flv.js，返回型別為布林值

flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)


/* 建立一個Player例項，它接收一個MediaDataSource(必選), 一個Config(可選)，如：
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        }); */

MediaDataSource的欄位列表如下，



這裡說下最後一個segments欄位（其餘欄位都很簡單），它接收一個陣列，型別為MediaSegment，MediaSegment的欄位列表如下，



如果segments欄位存在，transmuxer將把此MediaDataSource視為多片段源。在多片段模式下，將忽略MediaDataSource結構中的duration filesize url欄位。
什麼個意思呢，用白話說就是如果指定了segments欄位那麼之前指定的duration filesize url欄位就不再生效了，將標誌這是一個多片段合成一個的視訊，進度條的總時長就等於各片段相加的和，所以每個片段的duration filesize一定要指定準確。


Config欄位很多，就不一一介紹了，如下

 

flvjs.getFeatureList()

 

// 返回一些功能特性列表，比如是否支援FLV直播流、H264 MP4 視訊檔案等等，如下

 

flvjs.FlvPlayer(mediaDataSource, optionalConfig)
flvjs.NativePlayer(mediaDataSource, optionalConfig)

 

// 這兩個方法都繼承自 Player抽象介面，一個是建立適用於FLV的Player例項，一個是適用於MP4的Player例項，如下

　

其實 flvjs.createPlayer(略) 內部就是根據 type 分別建立不同的Player例項，自己去看看原始碼就知道了。如下

interface Player (abstract)

 

// 它裡面的每個方法或屬性其實就是你自己建立出來Player例項的部分方法或屬性，可直接呼叫。如下

flvjs.LoggingControl


// 一個全域性介面，用於設定 flv.js 的日誌級別。如下



舉幾個簡單的例子：

flvjs.LoggingControl.getConfig()　　 // 獲取當前日誌項的配置情況，如

 

enableCallback: true
enableDebug: true
enableError: true
enableInfo: true
enableVerbose: true
enableWarn: true
forceGlobalTag: true
globalTag: "flv.js"

flvjs.LoggingControl.enableVerbose


/* 輸出詳細除錯資訊，預設為true，頁面載入後會在控制檯列印一些解碼日誌資訊，如forceGlobalTag例子中的日誌那樣。
設定 false; 控制檯不再列印。*/

flvjs.LoggingControl.forceGlobalTag


// 預設false；

未設定之前的log列印是這樣

[MSEController] > MediaSource onSourceOpen
[FLVDemuxer] > Parsed onMetaData
[FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
[FLVDemuxer] > Parsed AudioSpecificConfig
[MSEController] > Received Initialization Segment, mimeType: video/mp4;codecs=avc1.640028
[MSEController] > Received Initialization Segment, mimeType: audio/mp4;codecs=mp4a.40.5
[FlvPlayer] > Maximum buffering duration exceeded, suspend transmuxing task

設定 true; 後是這樣

[flv.js] > MediaSource onSourceOpen
[flv.js] > Parsed onMetaData
[flv.js] > Parsed AVCDecoderConfigurationRecord
[flv.js] > Parsed AudioSpecificConfig
[flv.js] > Received Initialization Segment, mimeType: video/mp4;codecs=avc1.640028
[flv.js] > Received Initialization Segment, mimeType: audio/mp4;codecs=mp4a.40.5
[flv.js] > Maximum buffering duration exceeded, suspend transmuxing task
[flv.js] > MediaSource onSourceEnded

 

flvjs.Events


// 可以與Player.on（）/ Player.off（）一起使用的一系列常量。需要使用字首flvjs.Events。如下

flvjs.ErrorTypes
flvjs.ErrorDetails


// 是幾個錯誤型別以及相應型別對應的錯誤詳情，可以用來做些判斷。也需要使用字首flvjs.Events。如下



0x004: 直播播放 文件相關內容
　　
您需要在MediaDataSource中提供一個實時流URL（可以是HTTP 或 WebSocket），並指示isLive：true。如下

        var flvPlayer = flvjs.createPlayer({
            type: "flv",
            isLive: true,
            url: "http://127.0.0.1:8080/live/livestream.flv"
        });

0x005: 多段播放 文件相關內容

　　
多片段配置示例，需注意的是文件強調：您必須為每個細分提供準確的持續時間。



0x006: 使用記錄

  • 可以在播放前指定MediaDataSource引數，hasAudio（是否有音訊）及hasVideo（是否有視訊），單獨指定單獨有，都指定則都有。
  • SeekTo功能 或 player.currentTime屬性 接收的值型別是Number，如78或108.999，單位秒

 

0x007: 問題記錄
　　Q1：點選進度條的未緩衝區域時，不會跳轉到對應時間處繼續播放，而是無響應。比如6分鐘MV，當前播放到3分0秒，當前緩衝到5分0秒，如果點選進度條到5分01秒或之後播放器就無響應了。
　　A1：目前使用者層的解決辦法只能先點選到離緩衝區最近的時長，如4分59秒，播放器才會自動緩衝接下來未緩衝的片段。小檔案基本無感，大檔案才會有體現。（點播，視訊源型別flv，H264+AAC，大小111 MB ）

　　QN：...........

 

0x008: 完結

相關文章