轉載請註明出處：https://blog.csdn.net/impingo
項目官網：https://pingos.io
項目地址：https://github.com/im-pingo/pingos
目錄
什麼是flv.js
HTML5 原生僅支持播放 mp4/webm 格式，是不支持 FLV格式的。
flash性能問題是長期以來被全世界人所詬病的，尤其是明年起chrome徹底拋棄flash，越來越多有直播需求的人產生焦慮。這就加速了html5播放器的發展，也使得人們對html5非插件式的播放器更加渴望。而flv.js就是這麼一款可以利用html5的video標籤將http-flv直播流實時播放的一個js版的播放器。
flv.js的原理
flv.js在獲取到FLV格式的音視頻數據後將 FLV 文件流轉碼複用成 ISO BMFF（MP4 碎片）片段，再通過Media Source Extensions API 傳遞給原生HTML5 Video標籤進行播放。
flv.js 是使用 ECMAScript 6 編寫的，然後通過 Babel Compiler 編譯成 ECMAScript 5，使用 Browserify 打包。
flv.js 從服務器獲取FLV再解封裝後轉給Video標籤的原因如下：
- 兼容目前的直播方案：目前大多數直播方案的音視頻服務都是採用FLV容器格式傳輸音視頻數據。
- flv格式簡單，相比於MP4格式轉封裝簡單、性能上也佔優勢，解析起來更快更方便。
常見直播協議
- RTMP: 底層基於TCP，在瀏覽器端依賴Flash。
- HTTP-FLV: 基於HTTP流式IO傳輸FLV，依賴瀏覽器支持播放FLV。
- WebSocket-FLV: 基於WebSocket傳輸FLV，依賴瀏覽器支持播放FLV。WebSocket建立在HTTP之上，建立WebSocket連接前還要先建立HTTP連接。
- HLS: Http Live Streaming，蘋果提出基於HTTP的流媒體傳輸協議。HTML5可以直接打開播放。
- RTP: 基於UDP，延遲1秒，瀏覽器不支持。
兼容性
理論上只要是支持Media Source Extensions和ECMAScript 5的瀏覽器都是兼容flv.js的，瀏覽器對MSE的兼容情況如下圖，從圖中可以看出，flv.js的兼容性還是非常不錯的。
需要指出的是iPhone版的Safari是不支持MSE的，所以在iPhone上只有hls是最理想的選擇，而慶幸的是PC版和android版的瀏覽器大多都是支持MSE的，也就是說可以利用http-flv直播實現延時較低的效果。
如果你對兼容性要求非常高的話，HLS會是非常好的選擇，而並非所有瀏覽器版本都支持HLS播放，但是你可以利用另外一個JS播放器項目（video.js）實現全平臺的hls直播。後續我會寫一篇專門講解video.js的博客討論這個方案。這裏附上一張各個瀏覽器對HLS的支持情況：
所以，你可以將flv.js和video.js配合使用，針對不同平臺實現最優的方案。
直播服務器搭建
關於直播服務器搭建的流程，我在以前的博客裏寫了很多，感興趣的可以參考分佈式直播系統（二）【搭建單點rtmp\http-flv\hls流媒體服務器】
當然也可以使用我的一鍵部署腳本安裝：
https://github.com/im-pingo/pingos
# 快速安裝
git clone https://github.com/im-pingo/pingos.git
cd pingos
./release.sh -i
# 啓動服務
cd /usr/local/pingos/
./sbin/nginx
推流
ffmpeg推流
ffmpeg -re -i 文件.mp4 -vcodec copy -acodec copy -f flv rtmp://ip地址/live/01
OBS推流
Open Broadcaster Software（簡稱OBS）是一款直播流媒體內容製作軟件。同時程序和其源代碼都是免費的。
支持 OS X、Windows、Linux操作系統。適用於多種直播場景。滿足大部分直播行爲的操作需求（發佈桌面、發佈攝像頭、麥克風、揚聲器等等）。
flv.js搭建過程
下載鏈接
爲了方便使用，我已經將flv.js編譯打包好了，直接下載解壓到你的網站目錄引用即可。
-
可以使用百度雲盤下載
鏈接: https://pan.baidu.com/s/1ihTo15nsgfLqXKa0vyFt-w
提取碼: gd55 -
也可以從github下載
git clone https://github.com/im-pingo/h5player.git
將h5player複製到你的網站目錄，h5player/flv目錄下有個index.html文件，這裏是js播放器接口的調用示例，你可以直接利用這個頁面演示。
flv.js Demo演示
Demo地址：http://player.pingos.io/flv
我已經搭建了一個完整的演示界面，你可以快速體驗一把。
- 輸入http-flv的直播地址
- 點擊load按鈕即可播放。
![在這裏插入圖片描述]()
播放器主要參數
| 參數 | 描述 |
|---|---|
| enableStashBuffer | 是否開啓播放器端緩存 |
| stashInitialSize | 播放器端緩存 |
| isLive | 是否爲直播流 |
| hasAudio | 是否播放聲音 |
| hasVideo | 是否播放畫面 |
QQ交流羣：697773082
QQ交流羣：697773082