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

最近，我們將 Facebook 網(wǎng)絡(luò)中的所有視頻全部從 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 的視頻體驗變得更好。

網(wǎng)站建設(shè)專家中科服網(wǎng)絡(luò)（www.xinzz.cc）專注于高端品牌網(wǎng)站建設(shè)的解決方案，為您提供專業(yè)、安全的企業(yè)展示網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)站認證、網(wǎng)絡(luò)營銷、并提供一站式互聯(lián)網(wǎng)基礎(chǔ)服務。7×24小時專業(yè)技術(shù)支持,互聯(lián)網(wǎng)用戶服務的選擇。