HTML5 視頻直播(一)

8gw234 9年前發布 | 443K 次閱讀 HTML5 前端技術

原文  http://www.imququ.com/post/html5-live-player-1.html


前不久工作中遇到了在移動 WEB 端直播視頻的需求,研究了一下相關技術,記錄一下。

目前 WEB 上主流的視頻直播方案有 HLS 和 RTMP,移動 WEB 端目前就只有 HLS 能用,我們重點介紹它。

HTTP Live Streaming

HTTP Live Streaming(簡稱 HLS)是一個基于 HTTP 的視頻流協議,由 Apple 公司實現,Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS,高版本 Android 也增加了對 HLS 的支持。一些常見的客戶端如:MPlayerX、VLC 也都支持 HLS 協議。

HLS 協議基于 HTTP,非常簡單。一個提供 HLS 的服務器需要做兩件事:

  • 編碼:以 H.263 格式對圖像進行編碼,以 MP3 或者 HE-AAC 對聲音進行編碼,最終打包到 MPEG-2 TS(Transport Stream)容器之中;
  • 分割:把編碼好的 TS 文件等長切分成后綴為 ts 的小文件,并生成一個 .m3u8 的純文本索引文件;

瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像,可以簡單的認為 m3u8 就是包含多個 ts 文件的播放列表。播放器按順序逐個播放,全部放完再請求一下 m3u8 文件,獲得包含最新 ts 文件的播放列表繼續播,周而復始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 文件組成,m3u8 必須動態更新,ts 可以走 CDN。

可以看到 HLS 協議本質還是一個個的 HTTP 請求 / 響應,所以適應性很好,不會受到防火墻影響。但它也有一個致命的弱點:延遲現象非常明顯。如果每個 ts 按照 5 秒來切分,一個 m3u8 放 6 個 ts 索引,那么至少就會帶來 30 秒的延遲。如果減少每個 ts 的長度,減少 m3u8 中的索引數,延時確實會減少,但會帶來更頻繁的緩沖,對服務端的請求壓力也會成倍增加。所以只能需要根據實際情況找到一個折中的點。

對于支持 HLS 的瀏覽器來說,直接這樣寫就能播放了:

<video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"
height="300" width="400"></video>

對于不支持 m3u8 的瀏覽器,比如 PC / Mac 上的 Chrome,需要借助 Flash 來實現了。網上有一些較為成熟的方案可以直接用,如: Sewise Player (免費)、 JW Player (收費)。

Real Time Messaging Protocol

Real Time Messaging Protocol(簡稱 RTMP)是 Macromedia 開發的一套視頻直播協議,現在屬于 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media Server,并且在瀏覽器中只能使用 Flash 實現播放器。它的實時性非常好,延遲很小。但是無法支持移動端 WEB 播放是它的硬傷。

前面提到的 JW Player 能很好的播放采用 RTMP 協議的直播服務。

這次先寫這么多,下一篇寫一個另類的直播方案。

 本文由用戶 8gw234 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!