爲何Facebook要將視頻從Flash全面遷移到HTML5？

英文原文：Why we chose to move to HTML5 video

編者按：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 後，視頻的播放速度更快了，人們點贊、評論和分享視頻的數量更多了，而且用戶報告的錯誤更少了。咱們作出這項調整後，人們彷佛開始在視頻上花費更多的時間。

視頻是你與周圍的世界進行互聯的一個精彩渠道，而咱們很高興地看到咱們在使用 HTML5 技術後，能使 Facebook 的視頻體驗變得更好。

本文由WeX5君整理，WeX5一款開源免費的html5開發工具，H5 App開發就用WeX5!

閱讀其餘app 開發相關文章：http://wex5.com/cn/?p=3443