關鍵字: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: 完結