為什么Facebook要將視頻從Flash全面遷移到HTML5？

 

　　編者按：Facebook前端高級工程師Daniel Baulig解釋了Facebook為什么要將視頻全面遷移到HTML5，包括這樣做的好處，帶來的挑戰和解決辦法。

 

　　最近，我們將Facebook網絡中的所有視頻全部從Adobe Flash遷移到了HTML5。我們將繼續與Adobe合作，為我們平臺上的游戲提供一個可靠、安全的Flash體驗，但我們會在所有的瀏覽器中默認使用HTML5技術播放視頻。

 

　　從開發速度到易訪問性，HTML5提供了很眾多好處。Facebook體系龐大，需求復雜，遷移到HTML5能讓我們更好地去提升創新的速度和規模。

 

　　HTML5的優點

 

　　開發速度

　　使用Web技術使我們能夠利用開源社區和Facebook中已有的優秀瀏覽器工具，不必重新編譯代碼，并能夠在瀏覽器直接應用變化，從而讓我們得以快速行動。

 

　　可測性

　　我們在Facebook有一個優秀的測試基礎設施。遷移到HTML5視頻后，我們可以自由地使用自己基礎設施里所有的web工具，比如Jest和Webdriver。

 

　　易訪問性

　　HTML5使我們能夠建立一個完全支持屏幕閱讀器和鍵盤輸入訪問的播放器。我們可以利用HTML5提供的輔助工具讓視力障礙人士更容易地使用我們的產品。讓所有人都能用上Facebook是我們使命(讓世界更加開放和互聯)中的一個重要組成部分。

 

　　我們必須應對的挑戰

 

　　獲得正確的日志

　　視頻日志有助于我們了解人們如何使用視頻播放器以及播放器的工作情況。我們會向公眾分享一些數據，例如視頻觀看次數和視頻發布者，而我們會使用其他的一些數據來確定應該將多少以及哪些視頻展現給人們。我們必須確保在同一場景中，新的視頻播放器記錄的數據和老的播放器記錄的數據一致。由于配置差異和其他的一些細節，要做到這一點異常的困難。為確保日志數據的正確性，我們創建了一個測試套件，在相同的用戶交互場景下，同時運行兩個視頻播放器，然后驗證日志記錄是否一致。這樣，我們才能確保新的HTML5視頻播放器的報告數據會有一個很高的可信度。

 

　　瀏覽器bug

　　在將視頻轉移到HTML5技術之前，我們要解決的一個主要問題是各種瀏覽器中存在的各種關于HTML5視頻的bug。在Chrome中使用SPDY協議的一個具體bug會導致瀏覽器在News Feed上停止加載和播放視頻。我們最終確定了這個問題是由于同時加載了太多的視頻觸發的，所以我們減少了視頻同時加載的數量，并確保如果加載的視頻不再需要時我們會盡快將它們刪除。

 

　　在舊瀏覽器上的糟糕表現

　　從理論上講，現在使用的大多數瀏覽器都支持HTML5視頻。然而，在實踐中我們發現了很多老版本瀏覽器上使用HTML5播放器時會比使用Flash播放器表現更差。此外，我們還看到其他的一些錯誤，比如更長的加載時間和整體上更糟的體驗。因此我們決定首先只在一小部分瀏覽器上推出HTML5播放器，然后一旦我們提升性能并修復了小bug，我們會逐漸推向更多的瀏覽器版本和操作系統。這就是為什么我們一直等到最近才在所有的瀏覽器中(除了很小的一部分)將視頻播放技術默認切換到HTML5。

 

　　頁面加載時間變長

　　我們在推出HTML5播放器時面臨的最后一個主要問題是，加載Facebook的時間變長了。在Facebook，我們十分關心我們提供給人們的體驗。用戶需要多久加載Facebook是我們衡量用戶體驗的一個重要因素。當我們發布了HTML5播放器后，我們注意到，用戶平均加載Facebook所花費的時間有所增加。通過修復幾個小的性能問題，并進行了多項細微的優化，我們終于看到了一個讓我們感到高興的水平。

 

　　對指標和用戶體驗的影響

　　使用HTML5視頻技術不僅簡化了我們開發過程，同時也提高了人們在Facebook上的視頻體驗。切換到HTML5后，視頻的播放速度更快了，人們點贊、評論和分享視頻的數量更多了，并且用戶報告的錯誤更少了。我們做出這項調整后，人們似乎開始在視頻上花費更多的時間。