LV（Flash Video）流媒體格式，是隨著 Flash MX 的推出發展而來的視頻格式。其文件體積小，一般1分鐘只占1MB，是普通視頻文件大小的1/3，且視頻質量良好，廣受視頻網站歡迎。然而，FLV 格式往往利用 Flash Player 進行解碼播放，但如今，主流瀏覽器都已經放棄支持 Flash Playe。同時，HTML5 原生的 video 標簽并不支持 FLV 格式。如何在 HTML5 時代，還能發揮 FLV 視頻格式的優勢呢？作為一個蓬勃發展中的視頻網站，bilibili 開源了 FLV 視頻的 HTML5 播放器，使得 HTML5 與 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 可以使用 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 的架構設計如下：

核心部分為 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 主要提供了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 作為一個 HTML5 視頻播放器，實現了通過原生 Javascript，在 HTML5 頁面上進行 FLV 視頻的播放，充分利用了 FLV 格式優秀的體積和質量，提供了更為優秀的播放體驗，降低了視頻服務器和負荷，同時支持切片、直播、懶加載等進階特性，功能豐富。Flv.js 目前已被廣泛應用到視頻播放網站中，使用者眾多，同時代碼質量高，值得使用、研究和學習。

線演示鏈接：

https://www.html5tricks.com/demo/html5-classical-player/index2.html

插件下載鏈接：

https://www.html5tricks.com/download/html5-classical-player.rar

【【【【解壓需要密碼的關注我】】】】

你可以點擊底部“閱讀原文”前往我們的官方網站html5tricks，在那里你可以在線演示這款HTML5古典風格的音樂播放器，并且下載這個插件的源碼，你可以將它分享給你的朋友們，代碼僅供參考和學習。