FLV（Flash Video）流媒體格式，是隨著 Flash MX 的推出發展而來的視頻格式。其文件體積小，一般1分鐘只占1MB，是普通視頻文件大小的1/3，且視頻質量良好，廣受視頻網站歡迎。然而，FLV 格式往往利用 Flash Player 進行解碼播放，但如今，主流瀏覽器都已經放棄支持 Flash Playe。同時，html5 原生的 video 標簽并不支持 FLV 格式。如何在 HTML5 時代，還能發揮 FLV 視頻格式的優勢呢？作為一個蓬勃發展中的視頻網站，bilibili 開源了 FLV 視頻的 HTML5 播放器，使得 HTML5 與 FLV 得以結合。
FLV視頻播放器
簡介
Flv.js，是 bilibili（嗶哩嗶哩）在 Github 上開源的 HTML5 的 FLV 視頻播放器，項目位于 https://github.com/bilibili/flv.js，目前版本為 v1.5.0。Flv.js 支持 H.264 + AAC/MP3 編碼的 FLV 視頻，支持視頻分片，支持低延遲的 HTTP/WebSocket 協議的 FLV 格式的直播視頻流，兼容 Chrome、Firefox、Safari 10、IE 11 和 Edge，具有極低的消耗，支持瀏覽器硬件加速。原理上，Flv.js 把 FLV 視頻流轉碼為 ISO BMFF（切片的MP4），然后把切片放到 HTML 的 video 元素中進行播放。
flv.js項目
安裝
Flv.js 可以使用 NPM 直接安裝，加入到前端項目依賴中：
npm install --save flv.js
也可以使用國內鏡像的 CNPM 進行安裝：
cnpm install --save flv.js
還可以在本地進行構建：
npm install # 安裝開發依賴
npm install -g gulp # 安裝構建工具 gulp
gulp release # 構建發布
Flv.js 使用 ECMAScript 6 編寫，使用 Babel Compiler 轉譯到 ECMAScript5，并使用 Browserify 進行打包。
示例
Flv.js 的架構設計如下：
Flv.js架構設計
核心部分為 FlvDemuxer 和 MP4Remuxer，分別對 FLV 視頻進行分離，和封裝為 MP4 視頻。內部通過多個Controller控制器，發送指令，對數據流的操作進行控制。
Flv.js 使用簡單，通過接口 createPlayer 實例化播放器，配置對應的視頻源，然后，掛載到 DOM 容器上，并調用 load() 進行加載，調用 play() 進行播放：
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://example.com/flv/video.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
注意到，flv.js 提供了 isSupported 接口，可以很方便地判斷 Flv.js 是否支持當前的瀏覽器環境。Flv.js提供了一個測試用的 demo 頁面，可以進行視頻播放的測試：
Flv.js demo
Flv.js 主要提供了3個函數：
- flvjs.createPlayer()：接受配置，實例化播放器
- flvjs.isSupported()：是否支持當前瀏覽器
- flvjs.getFeatureList()：支持的特性的列表
還有3個類：
- flvjs.FlvPlayer：FLV 播放器
- flvjs.NativePlayer：原生 HTML5 播放器，可以用戶單 MP4 文件的播放
- flvjs.LoggingControl：日志控制
以及3個枚舉：
- flvjs.Events：播放器事件
- flvjs.ErrorTypes：錯誤類型
- flvjs.ErrorDetails：錯誤具體信息
使用時的主要接口是 createPlayer，它的函數簽名如下：
function createPlayer(mediaDataSource: MediaDataSource, config?: Config): Player;
其中 mediaDataSource 進行視頻流配置，常用的參數包括：
- type：視頻類型，flv 或 mp4
- isLive：是否為直播視頻流
- cors：獲取視頻數據時是否啟用 CORS
- url：視頻流地址
- segments：視頻切片配置
而 config 進行 flv.js 播放器內部配置，包括worker、緩存、加載策略等的配置。
對于體積較大的視頻，往往在服務器中會進行切片處理。Flv.js 支持對于切片視頻的加載播放，通過提供 segments 配置。segments 是一個切片配置的列表，每個配置包括了視頻長度、文件大小和視頻地址：
"segments": [
{
"duration": 1234, // in milliseconds
"filesize": 5678, // in bytes
"url": "http://cdn.flvplayback.com/segments-1.flv"
},
{
"duration": 2345,
"filesize": 6789,
"url": "http://cdn.flvplayback.com/segments-2.flv"
},
{
"duration": 4567,
"filesize": 7890,
"url": "http://cdn.flvplayback.com/segments-3.flv"
}
// more segments...
]
Flv.js 支持直播視頻流的播放，通過 isLive 配置實現，支持 HTTP 協議的視頻流：
{
// HTTP FLV
"type": "flv",
"isLive": true,
"url": "http://127.0.0.1:8080/live/livestream.flv"
}
以及 WebSocket 協議的視頻流：
{
// FLV over WebSocket
"type": "flv",
"isLive": true,
"url": "ws://127.0.0.1:9090/live/livestream.flv"
}
flv.js項目
總結
Flv.js 作為一個 HTML5 視頻播放器，實現了通過原生 JAVAscript，在 HTML5 頁面上進行 FLV 視頻的播放，充分利用了 FLV 格式優秀的體積和質量，提供了更為優秀的播放體驗，降低了視頻服務器和負荷，同時支持切片、直播、懶加載等進階特性，功能豐富。Flv.js 目前已被廣泛應用到視頻播放網站中，使用者眾多，同時代碼質量高，值得使用、研究和學習。
