黃瓜切片: HTTP Live Streaming 原理簡介

一直覺得網絡上的流媒體播放技術是個神秘有趣的東西, 很早就聽過接觸過 mms/rtsp 這類流媒體 protocols, 印象中需要專門的服務器, 專門的客戶端 (包括瀏覽器中的 flash 插件形式).最近因項目機會, 仔細研究了一番 Apple 推出的 HTTP Live Streaming, 總算對這方面的知識有了清晰的認知.

HTTP Live Streaming 是個很有趣的實現, 它本質上就是把一段視頻 "切片" (經蘋果提供的 mediafilesegmenter), 然後提供給瀏覽器一個包含這些視頻 "切片" 信息的 "索引" - 一份 .m3u8 的 playlist, 瀏覽器據此 "一片一片" 地下載這些片段並播放, 於是便有了 "流" 的效果.

打個比方, 把一段視頻想象成一根黃瓜, 它被切成了黃瓜片放在服務器端, 同時有份清單寫著這黃瓜總長度幾許, 被切成幾片, 每片的 "名字" 是什麼. 拿到這清單的瀏覽器, 便可按圖索驥, 一片一片地拿回來喂給人 "吃".

如果這黃瓜是不斷成長的 - 即, 服務器那端給的不是靜態的一段視頻, 而是從攝像機/衛星電視信號之類過來的 "活" 的 (live) 視頻流 - 這時, 同樣的, 只要送進 "切片機" (mediastreamsegmenter) 上的部分, 都會被切片, 更新到播放列表. 瀏覽器根據更新了的播放列表, 繼續取 "黃瓜片", 直到播放列表裡收到 "黃瓜已分發完畢".

HTTP Live Streaming 的創新之處在於:

1. 無需專門的 "流媒體服務器", 可與現有的 CDN 無縫結合
2. 走 HTTP 協議, 無需特殊端口, 無需為穿越 NAT 煩惱

#1: 由於該技術本質上只是把視頻切分成片段 + 播放列表, 因此, 結合 Amazon S3/CloudFront 這樣的技術, 你可以很簡單地把切片後的視頻都傳到 S3 的 bucket 上, 然後在你的頁面裡通過 <video> tag 引用相應的 .m3u8 播放列表, 這就完成你的視頻流媒體服務了! 更進一步, 就是把 S3 bucket 發布到 CloudFront 上, 由 CloudFront 幫你把這視頻 "推送" 到離全球各處用戶最近的 Amazon 的服務器上, 給用戶最快的訪問體驗.

#2: 視頻播放時, 瀏覽器完全通過 HTTP 從服務器下載視頻片段. 這讓通常只開放 80 端口的企業網內部分發視頻內容不再需要面對防火牆/NAT 穿越之類的痛苦.

HTTP Live Streaming 雖已提交 IETF, 但目前尚未成為業界標准, 各家也自懷鬼胎. Apple 自家的 iOS 以及 OSX 是完美支持的, 由於 iOS 設備的火爆, 像 Adobe/微軟, 都在服務器上加入了 HTTP Live Streaming 的支持 (不過 flash 插件本身不支持, 反正 iOS 上也跑不了 flash, 哈).

經測試, html5 <video> 嵌 .m3u8 HTTP Live Streaming, 只有在 Apple 的平台上能工作, 即 iPhone/iPad/iPod Touch/Mac 上的 Safari 能播放. 換到 Chrome/Firefox/IE, 則徹底瞎火.

因此, 如果你的視頻項目是針對蘋果用戶, HTTP Live Streaming 就是你需要的. 但要支持其他平台/瀏覽器, 你還需要尋找別的方案.

現正研究 YouTube 的 html5 是如何支持所有瀏覽器以 <video> 進行流播放的, 若有進展再更新.

____

相關閱讀:

1. 維基百科: http://en.wikipedia.org/wiki/HTTP_Live_Streaming
2. 歷史背景: http://www.appleinsider.com/articles/09/07/08/apple_launches_http_live_streaming_standard_in_iphone_3_0.html
3. 官方文檔: http://developer.apple.com/library/ios/#documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/Introduction/Introduction.html
4. 工具下載 (需開發者賬號): https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/wa/getSoftware?bundleID=20993