最近,Facebook將網絡中的視頻幾乎全部從Adobe Flash遷移到HTML5。當然,Facebook將繼續與Adobe合作,為平臺上的游戲提供可靠、安全的Flash體驗,但會在所有的瀏覽器中默認使用 HTML5 技術播放視頻。從開發速度到易訪問性,HTML5提供了很多好處。
據Facebook 前端高級工程師丹尼爾·保利希介紹,使用Web技術使Facebook能夠利用開源社區和Facebook中已有的優秀瀏覽器工具,不必重新編譯代碼,并能夠在瀏覽器直接應用變化,從而讓Facebook得以快速行動。Facebook有優秀的測試基礎設施,遷移到HTML5視頻后,工程師可以自由地使用所有的Web工具,比如Jest和Webdriver。HTML5使工程師們能夠建立一個完全支持屏幕閱讀器和鍵盤輸入訪問的播放器,可以利用HTML5提供的輔助工具讓視力障礙人士更容易地使用產品。
視頻日志有助于Facebook了解用戶使用視頻播放器的工作情況。Facebook會向公眾分享一些數據,例如視頻觀看次數和視頻發布者。丹尼爾·保利希表示,Facebook必須確保在同一場景中,新視頻播放器記錄的數據和老播放器記錄的數據一致,但由于配置差異和其他一些細節,要做到這一點非常困難。為確保日志數據的正確性,Facebook創建了一個測試套件,在相同的用戶交互場景下,同時運行兩個視頻播放器,然后驗證日志記錄是否一致,這樣能確保新的HTML5視頻播放器的報告數據有很高的可信度。
在將視頻轉移到HTML5技術之前,Facebook要解決的一個主要問題是各種瀏覽器中存在的關于HTML5視頻的bug(漏洞)。丹尼爾·保利希介紹說,在Chrome瀏覽器中,SPDY協議的某個bug會導致瀏覽器在News Feed上停止加載和播放視頻。工程師發現,這個問題是由于同時加載了太多視頻而觸發的,所以Facebook減少了視頻同時加載的數量,并確保如果加載的視頻不再需要時會盡快將它們刪除。
目前,大多數瀏覽器都支持HTML5視頻。然而,很多老版本瀏覽器上使用HTML5播放器比使用Flash播放器表現差,用戶需要更長的加載時間。因此,Facebook決定首先只在一小部分瀏覽器上推出HTML5播放器,一旦提升了性能并修復了bug,會逐漸推向更多的瀏覽器版本和操作系統。
使用HTML5視頻技術不僅簡化了開發過程,同時也提高了用戶在Facebook上的視頻體驗。切換到HTML5后,視頻播放速度更快,用戶點贊、評論和分享視頻的數量更多了,并且用戶報告的錯誤更少了。Facebook在推出HTML5播放器時面臨的最后一個主要問題是:加載時間變長了。用戶加載時長是衡量用戶體驗的一個重要因素,丹尼爾·保利希表示,通過修復幾個小的性能問題以及多項細微的優化,終于達到一個令人滿意的水平。Facebook做出這項調整后,用戶似乎開始在視頻上花費更多的時間。