使用B站開源的flv.js：實現網頁無外掛線上播放RTMP/FLV（含低延遲最佳化指南）
作者簡介
👋Hi，我是 EZ 線上工具網的站長，專注於多媒體線上影片技術與瀏覽器端工具開發。
EZ 線上工具網 是一個以 線上影片處理 為核心的工具平台，提供包括 M3U8 線上播放、M3U8 轉 MP4、RTMP / HLS 串流測試、FFmpeg 線上轉碼 等功能，全部可直接在瀏覽器中使用，無需安裝用戶端。
引言
在建構網頁直播應用程式時，眾多開發者都會面臨這樣一個核心挑戰：如何在放棄不安全的Flash後，繼續相容廣泛使用的RTMP/FLV串流媒體協定？B站開源的flv.js橫空出世，成功實現了一個純HTML5的無外掛播放解決方案。它不僅徹底解決了Flash帶來的安全漏洞、相容性警告和體驗割裂問題，還讓使用者能夠「開箱即用」，在監控大螢幕、內部直播、線上教育等場景中，獲得更安全、更順暢的網頁串流媒體播放體驗。
關於flv.js
flv.js 是B站開源的 HTML5 影片播放器，主要用於在網頁端播放 FLV（Flash Video）格式的影片串流，同時也支援透過特定方式處理 RTMP（Real-Time Messaging Protocol）串流。採用純 JavaScript 編寫，無需依賴 Flash 外掛程式，能夠在現代瀏覽器中高效地實現低延遲影片播放，廣泛應用於直播、隨選視訊等場景。
概念解釋
- FLV 格式： 一種串流媒體格式，具有體積小、載入速度快等特點，常用於網路影片傳輸。
- RTMP 協定： 一種即時訊息傳輸協定，主要用於影音資料的即時傳輸，在直播領域應用廣泛。
- flv.js： 透過將 FLV 格式的影片資料轉換為 HTML5 支援的 Media Source Extensions（MSE）格式，實現在不使用 Flash 的情況下播
RTMP/HLS/HTTP-FLV對比
| 特性 | RTMP (Flash) | HLS (m3u8) | HTTP-FLV (flv.js) |
|---|---|---|---|
| 延遲 | 極低 (1-3s) | 高 (10-30s) | 低 (1-3s) |
| 外掛依賴 | 需要 Flash | 無 | 無 (需支援 MSE) |
| 現代瀏覽器支援 | 差 (已淘汰) | 優 | 優 |
網頁實現RTMP/FLV格式的影片播放
引入 flv.js
可透過CDN或本機檔案引入flv.js，以下是透過CDN引入的範例：
<script src="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js"></script>建立影片元素
在 HTML 中新增影片元素，用於顯示影片內容：
<video id="videoElement" controls width="800" height="450"></video>初始化 flv.js 播放器
在 JavaScript 中初始化 flv.js 播放器，指定影片來源位址等參數：
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true, // 核心：如果是直播串流，務必開啟
url: 'http://example.com/live/stream.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
// 處理自動播放受阻的情況
var playPromise = flvPlayer.play();
if (playPromise !== undefined) {
playPromise.catch(error => {
console.warn("自動播放受阻，需使用者手動點擊播放", error);
});
}
}⚠️ 注意：如果要播放 RTMP 串流，通常需要先在服務端將 RTMP 串流轉為 FLV 串流，然後再使用 flv.js 播放轉換後的 FLV 串流。
最佳整合實踐
錯誤處理
新增錯誤處理機制，當播放出現錯誤時能夠及時提示使用者或進行重試操作。例如：
flvPlayer.on('error', function(error) {
console.error('播放錯誤:', error);
// 可以在這裡新增重試邏輯或提示使用者
});資源釋放
在頁面關閉或不需要播放影片時，及時銷毀播放器實例，釋放資源：
flvPlayer.destroy();互動體驗最佳化
低延遲追幀策略，當瀏覽器分頁切到背景再回來時，延遲會堆積。可以新增一個簡單的計時器檢查緩衝區，程式碼參考：
// 如果延遲超過3秒，直接跳到最新畫面
setInterval(() => {
if (flvPlayer.buffered.length > 0) {
let end = flvPlayer.buffered.end(0);
let diff = end - flvPlayer.currentTime;
if (diff > 3) {
flvPlayer.currentTime = end - 0.5;
}
}
}, 5000);跨域 (CORS) 與 協定限制
這是 90% 的開發者在整合 flv.js 時會遇到的第一個坑。
CORS： HTTP-FLV 串流伺服器必須設定 Access-Control-Allow-Origin，否則 JavaScript 無法讀取串流資料。
混合內容 (Mixed Content)： 如果你的網頁是 https 的，那麼影片串流位址也必須是 https (或 wss)，否則會被瀏覽器直接攔截。
常見問題及解決方法
Q：為什麼RTMP直播串流播放起來很卡頓或有延遲？
雖然對低延遲播放進行了最佳化，但最終速度也取決於網路和串流媒體伺服器的品質。卡頓和延遲通常與網路環境及串流本身有關,確認輸入的RTMP串流位址是有效且穩定的。
Q：如何最佳化RTMP直播串流的播放品質？
要最佳化RTMP直播串流播放品質，建議：
- 確保網路連線穩定，頻寬充足；
- 選擇合適的位元率和解析度，避免過高的位元率導致卡頓；
- 使用有線網路連線代替WiFi；
- 關閉其他佔用頻寬的應用程式；
- 定期清理瀏覽器快取，播放器會自動根據網路狀況調整緩衝策略，提供最佳觀看體驗。
Q: 如何解決RTMP串流播放失敗的問題？
先檢查串流位址是否正確，確保伺服器正常運作。其次檢查網路連線，確認防火牆沒有阻擋相關連接埠。然後確認瀏覽器支援HTML5影片播放，建議使用最新版本的Chrome、Firefox或Edge瀏覽器。如果遇到CORS錯誤，請檢查伺服器CORS設定或使用代理伺服器。
整合效果展示
體驗位址：https://ezwebtools.net/zh-TW/rtmp-player
功能特性
- 即時截圖: 支援在播放或暫停時進行即時截圖，可預覽並儲存圖片。
- 多格式支援: 自適應RTMP和HTTP-FLV，支援多種裝置。
- 串流媒體狀態展示： 即時動態展示連結狀態、位元率、解析度、HTTP-FLV 延遲等資訊。
使用場景
- 適用於各種直播場景，如遊戲直播、體育賽事、新聞直播等，提供低延遲的觀看體驗。
- 用於安防監控系統，即時傳輸監控畫面，支援多路影片串流同時播放。
- 測試RTMP來源位址是否正常運作
總結
flv.js不僅僅是一個播放器，它是現階段 B 端監控、低延遲直播場景下的最平衡點。透過合理的伺服器端轉串流（如使用 Nginx-rtmp-module 或 SRS）結合前端的 MSE 技術，我們可以在不犧牲效能的前提下，擁抱全 HTML5 的未來。