HTML5 視頻直播(一)( 轉)

HTML5 視頻直播(一)

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

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

HTTP Live Streaming

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

HLS 協議基於 HTTP,很是簡單。一個提供 HLS 的服務器須要作兩件事:github

  • 編碼:以 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。vim

能夠看到 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(收費)。app

Real Time Messaging Protocol

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

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

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

本文連接: https://www.imququ.com/post/html5-live-player-1.html

--EOF--

相關文章
相關標籤/搜索