為什么Facebook要將視頻從Flash全面遷移到HTML5?
2016年01月29日
39
分類:HTML5開發(fā)方案
最近,我們將Facebook網(wǎng)絡中的所有視頻全部從Adobe Flash遷移到了HTML5。我們將繼續(xù)與Adobe合作,為我們平臺上的游戲提供一個可靠、安全的Flash體驗,但我們會在所有的瀏覽器中默認使用HTML5技術(shù)播放視頻。
從開發(fā)速度到易訪問性,HTML5提供了很眾多好處。Facebook體系龐大,需求復雜,遷移到HTML5能讓我們更好地去提升創(chuàng)新的速度和規(guī)模。
HTML5的優(yōu)點
開發(fā)速度
使用Web技術(shù)使我們能夠利用開源社區(qū)和Facebook中已有的優(yōu)秀瀏覽器工具,不必重新編譯代碼,并能夠在瀏覽器直接應用變化,從而讓我們得以快速行動。
可測性
我們在Facebook有一個優(yōu)秀的測試基礎(chǔ)設(shè)施。遷移到HTML5視頻后,我們可以自由地使用自己基礎(chǔ)設(shè)施里所有的web工具,比如Jest和Webdriver。
易訪問性
HTML5使我們能夠建立一個完全支持屏幕閱讀器和鍵盤輸入訪問的播放器。我們可以利用HTML5提供的輔助工具讓視力障礙人士更容易地使用我們的產(chǎn)品。讓所有人都能用上Facebook是我們使命(讓世界更加開放和互聯(lián))中的一個重要組成部分。
我們必須應對的挑戰(zhàn)
獲得正確的日志
視頻日志有助于我們了解人們?nèi)绾问褂靡曨l播放器以及播放器的工作情況。我們會向公眾分享一些數(shù)據(jù),例如視頻觀看次數(shù)和視頻發(fā)布者,而我們會使用其他的一些數(shù)據(jù)來確定應該將多少以及哪些視頻展現(xiàn)給人們。我們必須確保在同一場景中,新的視頻播放器記錄的數(shù)據(jù)和老的播放器記錄的數(shù)據(jù)一致。由于配置差異和其他的一些細節(jié),要做到這一點異常的困難。為確保日志數(shù)據(jù)的正確性,我們創(chuàng)建了一個測試套件,在相同的用戶交互場景下,同時運行兩個視頻播放器,然后驗證日志記錄是否一致。這樣,我們才能確保新的HTML5視頻播放器的報告數(shù)據(jù)會有一個很高的可信度。
瀏覽器bug
在將視頻轉(zhuǎn)移到HTML5技術(shù)之前,我們要解決的一個主要問題是各種瀏覽器中存在的各種關(guān)于HTML5視頻的bug。在Chrome中使用SPDY協(xié)議的一個具體bug會導致瀏覽器在News Feed上停止加載和播放視頻。我們最終確定了這個問題是由于同時加載了太多的視頻觸發(fā)的,所以我們減少了視頻同時加載的數(shù)量,并確保如果加載的視頻不再需要時我們會盡快將它們刪除。
在舊瀏覽器上的糟糕表現(xiàn)
從理論上講,現(xiàn)在使用的大多數(shù)瀏覽器都支持HTML5視頻。然而,在實踐中我們發(fā)現(xiàn)了很多老版本瀏覽器上使用HTML5播放器時會比使用Flash播放器表現(xiàn)更差。此外,我們還看到其他的一些錯誤,比如更長的加載時間和整體上更糟的體驗。因此我們決定首先只在一小部分瀏覽器上推出HTML5播放器,然后一旦我們提升性能并修復了小bug,我們會逐漸推向更多的瀏覽器版本和操作系統(tǒng)。這就是為什么我們一直等到最近才在所有的瀏覽器中(除了很小的一部分)將視頻播放技術(shù)默認切換到HTML5。
頁面加載時間變長
我們在推出HTML5播放器時面臨的最后一個主要問題是,加載Facebook的時間變長了。在Facebook,我們十分關(guān)心我們提供給人們的體驗。用戶需要多久加載Facebook是我們衡量用戶體驗的一個重要因素。當我們發(fā)布了HTML5播放器后,我們注意到,用戶平均加載Facebook所花費的時間有所增加。通過修復幾個小的性能問題,并進行了多項細微的優(yōu)化,我們終于看到了一個讓我們感到高興的水平。
對指標和用戶體驗的影響
使用HTML5視頻技術(shù)不僅簡化了我們開發(fā)過程,同時也提高了人們在Facebook上的視頻體驗。切換到HTML5后,視頻的播放速度更快了,人們點贊、評論和分享視頻的數(shù)量更多了,并且用戶報告的錯誤更少了。我們做出這項調(diào)整后,人們似乎開始在視頻上花費更多的時間。
視頻是你與周圍的世界進行互聯(lián)的一個精彩渠道,而我們很高興地看到我們在使用HTML5技術(shù)后,能使Facebook的視頻體驗變得更好。