|
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 的視頻體驗變得更好。 |
