今天來快速認識 flv.js 。

FLV 影片格式 ( Flash Video ) 無法直接在瀏覽器播放，一般多會藉 RTMP 協議將 FLV 傳輸給前端，在網頁前端透過 Flash 去解碼播放。而 flv.js 則是走 HTTP 協議，這種讓 FLV 透過 HTTP 協定在瀏覽器播放的技術，也稱為 http-flv。

如果不仰賴 Flash ，FLV 影片本身是無法在瀏覽器上仍播放的，中國影音公司 bilibili 的開源 Library flv.js，就是為了解決依賴 Flash 的困境。

flv.js 背後有一段可歌可泣的故事。

安裝、引入 flv.js

cdn 引入 flv.js

 <script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.4.2/flv.min.js"></script>

npm

npm install --save flv.js

注意 flv.js 並不是引入後什麼都不做就能幫我們解析 FLV，我們還需要用 JavaScript 去幫我們綁定。

例如以下 HTML，在 任何瀏覽器都無法觀看。

<video id="video" controls src="https://qiniu-global-pull-rtmp.17app.co/17app/2fdb9f0f-cdc3-4eb4-a8af-ff1c261a2369.flv" controls height="600"></video>

圖就不放了，任一瀏覽器都不能看。
我們還需要做點事情，讓瀏覽器可以播放這個從直播網站抓下來的影片

檢查是否可支援Flv

在引入 flvjs 後，可以用flvjs.isSupported()來檢查是否可支援播放 flv 了，這個方法會回傳 true 或 false。

我們可以用 if 判斷式，將我們的程式碼寫在裏頭

if(flvjs.isSupported()){
  //..做某些事
}

初始化 flvjs 物件並與 video 綁定

與這幾天介紹的 dashjs、hlsjs 相似，我們都需要綁定 flvjs物件 到 <video> 上
程式碼如下

<video id="videoElement" controls width="600"></video>

    if (flvjs.isSupported()) {
        let video = document.getElementById('video');
        let flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'https://qiniu-global-pull-rtmp.17app.co/17app/2fdb9f0f-cdc3-4eb4-a8af-ff1c261a2369.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
    }

說明

首先利用flvjs.createPlayer()建立 flvjs 物件，我們可以傳入物件給flvjs.createPlayer()當預設 config，這裡我傳了 flv 影片連結和對應的格式參數進去。

之後利用attachMediaElement()方法，傳入媒體物件以綁定 flv 。
最後利用.load()加載影片。

createPlayer( MediaDataSource, config )

createPlayer可以傳入兩個物件 MediaDataSource、config 當參數。

MediaDataSource、config 具體參數可見此。

因為是取別人影片當範例，就不提供 DEMO 連結了。
17、金剛皆是使用 http-flv，有興趣的人...自己試試吧。

video 原生方法或事件

flv.js 基本上與 <video> 不相衝，它只是幫助我們播放 FLV 影片的 Library ，我們一樣可以使用 HTML5 原生<video>方法，例如 play()、pause()...etc。
　
　
　

　
雖然朋友在裏頭，但畢竟是取別間公司的影片來練習，此篇文章點到為止。
基本上 flv.js github 還蠻詳細的，有興趣可以參考看官方文件。
　
參考
flvjs github
flvjs api