HTML5視頻發展狀況報告
英文原文: The State Of HTML5 Video
HTML5已經進入了在線視頻市場,這是一件激動人心的事情,同時也對開發者提出了挑戰。隨著 HTML5 規范和各種瀏覽器的不斷改變,LongTail Video 花費了大量的時間來弄清楚這一技術的本質,并且在各種瀏覽器以及設備上測試了播放效果,然后針對 HTML5 播放效果對產品進行了優化。
本文意在與其他的用戶以及開發者分享 HTML5 所支持的技術以及目前無法實現的技術。
這篇報告重點關注 HTML5 支持技術的當前狀況,我們還將繼續完善我們的產品,希望大家能夠從我們發現的結果中獲得幫助,我們將測試的結果分成了幾個主題。
隨著 HTML5 視頻的發展,這篇報告也會隨著發生改變。如果一個瀏覽器或是設備添加了新的功能,我們將在這篇報告中補充相關內容。對于那些不常使用的 HTML5 視頻功能也是一樣。歡迎在 非死book 上與我們討論。
1. 瀏覽器和設備的市場份額
首先分享的是瀏覽器和設備的市場份額統計數據,以及它們目前支持的模式。
目前還難以給出一個準確的數據,因為兩大數據提供商——StatCounter 和 NetMarketShare 給出的結果存在著很大的不同。不同地區的市場份額也存在著明顯的差異。
下面是 StatCounter 在 2011 年 11 月給出的統計數據,桌面設備和移動設備占有了1% 的市場份額。
已經有2/3的市場支持 HTML5 了。話雖如此,但是 Flash 還有它的生存空間。在桌面上,IE6/7/8占據了很大的市場份額,并且這一情況還可能持續許多年。由于它不支持 HTML5,像 Flash 這類替代技術還將存在于視頻播放應用中。至于其他的瀏覽器,它們基本已經完全支持 HTML5 視頻了。
移動手機和平板電腦在最近的幾年里已經融合成了一個新的格局。目前,只有 iOS 和 Android 占有很大的市場份額。它們都支持 HTML5 視頻。Android 仍然支持 Flash,但是它最近也宣布以后推出的手機將不再安裝 Flash 插件。
目前最流行的設備(XBox、PS3、Apple TV、Roku)既不是 web 瀏覽器,也不是 app markets。但隨著 Apple 和 Google 新產品的推出,2012年這一格局將會有所改變。
2. 媒體格式
HTML5最大的挑戰之一就是對視頻/音頻格式支持的斷裂。以下就是 HTML5 模式的當前情況統計。
在 Chrome 官方宣布放棄 MP4以后,MP4的支持情況將會急劇下降。但這一情況目前還難以預測。
iOS 和 Android 只支持 MP4 視頻。直到 WebM 解碼器成為硬件并集成到手機中,但這一情況還將困擾所有的移動設備。可以在 WebM 的博客上看到這一工作的最新進展情況。
每個瀏覽器支持添加多源下載的標簽。我們的測試顯示包含類型屬性將阻止一些預下載,但是會破壞 Android 2.2 的兼容性。在類型屬性中設置編解碼器不會影響任何瀏覽器。
在我們的測試中,并沒有包含 Ogg 視頻格式。這一格式很少使用,并且質量也不如 MP4 和 WebM。Firefox 3.6 是現在唯一一個支持 Ogg 但是不支持 WebM 的瀏覽器,而它的市場份額正在急劇下降(2011年 12 月市場份額為5%)。
3. 標簽屬性
HTML5視頻標簽支持多種屬性,并且大部分屬性已經能夠支持跨瀏覽器和設備訪問了。除了寬度、高度外,還有:
Firefox 目前尚不支持loop屬性,但是其他的屬性在桌面上可以使用。值得一提的是新的muted 屬性目前應用并不廣泛,但是我們預測它很快將被大量使用。
移動瀏覽器不支持 preload、autoplay 和 muted,但是 iOS5 已經開始支持loop了。iOS4和 iOS5 的另一個區別就是 iOS4 總是使用多個請求預下載視頻文件,而 iOS5 則不會預下載視頻。
每個瀏覽器的視頻控制看起來各有不同,但是它們都提供了相同的選項:一個播放/暫停開關、一個播放進度條和一個音量控制條。Safari 還提供了 2 個額外的按鈕:全屏和 30 秒回退。
移動設備上的視頻控制與桌面瀏覽器有很大的不同:
- 在 iPad 上,視頻控制還是非常相似的,只是它沒有音量控制條(音量控制使用硬件按鈕完成)。和 Safari 一樣,它也有一個全屏按鈕。
- 在 iPhone 上,在屏幕中間只有一個循環播放按鈕。點擊以后,視頻將自動全屏播放。退出全屏模式以后,循環播放按鈕重新出現。
- Android 2.2 上,不會顯示任何控制按鍵。這意味著,只能通過自定義的 JavaScript 代碼播放視頻。和 iPhone 一樣,視頻只能全屏播放。
- 在 Android 2.3 上,有一個控制欄。必須點擊播放按鈕才能播放視頻;直接點擊視頻畫面并不會有任何響應。雖然比 Android 2.2 有所改進,但是還是存在很多的 UX(用戶體驗)問題。
4. 全屏播放
可能最初你覺得全屏播放只是一個無關緊要的功能,但是它實際上是一個影響 HTML5 視頻好壞的重要技術。全屏播放能夠提升視覺體驗并增加觀看者的參與感。HTML5的全屏播放技術才剛剛起步,可以通過下面的表格進一步了解。
在許多的桌面瀏覽器中都使用了內置的控制機制實現全屏播放。Firefox 使用右鍵菜單選項,而 Safari 則采用的是一個控制欄按鈕。在移動設備上,全屏技術被廣泛應用。iPad 上總是有一個全屏開關,而 iPhone/Android 上的視頻播放模式總是全屏的。
W3C 最近正在開發一個全屏 API 標準。這個 API 可以將所有的 HTML 元素渲染成全屏模式,因此可以在視頻中添加各種自定義控件。Safari 和 Chrome 的最新版本已經支持這一 API 了,而 Firefox 10 也將引入該 API。
用戶顯示器的長寬比與視頻元素的大小通常并不匹配。因此,如何控制視頻在屏幕上的布局至關重要。在 iOS 中,提供了一個內置的控件用于在視頻原始大小和全屏播放模式間切換。Opera 的 CSS3 object-fit 屬性也是完成類似的功能的。在其他的瀏覽器中,視頻總是根據屏幕的尺寸調整大小。
5. 自適應流
自適應流是在線視頻的一個核心組成部分。它能夠實現:緩沖控制、流內質量調整、live/dvr 以及密碼和 DRM 安全機制。自適應流并不屬于 HTML5 標準,但是瀏覽器可以通過從 HTML5 的
Safari/iOS 已經支持 Apple 的 HTTP Live Streaming 協議了,而 Android 也準備支持 HLS,但是這一協議還存在許多問題并且還太新,不足以廣泛使用。MPEG DASH 是由 MPEG 開發的一款協議,用于規范自適應流。它還是一個全新的協議,目前尚未得到任何瀏覽器的支持。
為了評測以及規范自適應流的行為,必須制定相應的 QOS 標準。W3C/WhatWG 考慮了一些協議,但目前為止,只有 Firefox 支持部分解析幀、解碼和顯示規范。
每個瀏覽器都支持使用 HTTP 1.1 范圍請求尋找視頻中尚未下載的部分。這減少了對自適應流的需要。
6. 可訪問性
由于 HTML5 對瀏覽器而言是 native 的,它在可用性方面比 Flash 這類插件更具優勢。要讓視頻具有可訪問性,它必須能夠使用鍵盤控制,還必須使用封閉的字幕和視頻描述渲染,后者可以使用 HTML5 元素實現。以下的表格概述了不同瀏覽和設備上,HTML5對鍵盤和文本追蹤的支持情況。
IE、Firefox 和 Opera 上能夠使用鍵盤控制 HTML5 視頻元素。IE/Firefox 考慮了所有的視頻標簽,使用空格控制視頻的播放/暫停,通過左/右和上/下鍵控制進度和音量。Opera 中可以使用 tab 鍵控制所有的控件。
盡管 HTML5 文本追蹤正在積極發展,但目前還沒有任何瀏覽器支持這一功能。盡管各個瀏覽器都推出了一些測試版支持標簽。一旦瀏覽器正式支持文本追蹤功能,我們將在報告中及時更新相關內容并提供更加豐富的測試用例。
HTML5視頻規范定義了兩種播放閉合字幕的方法——視頻元素字幕和描述。第一種方法使用多種內嵌的音頻/視頻/文本軌道播放影片。第二種使用多個