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

最近，我們將 Facebook 網(wǎng)絡(luò)中的所有視頻全部從 Adobe Flash 遷移到了 HTML5。我們將繼續(xù)與 Adobe 合作，為我們平臺(tái)上的游戲提供一個(gè)可靠、安全的 Flash 體驗(yàn)，但我們會(huì)在所有的瀏覽器中默認(rèn)使用 HTML5 技術(shù)播放視頻。

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

HTML5 的優(yōu)點(diǎn)

開發(fā)速度

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

可測(cè)性

我們?cè)?/span> Facebook 有一個(gè)優(yōu)秀的測(cè)試基礎(chǔ)設(shè)施。遷移到 HTML5 視頻后，我們可以自由地使用自己基礎(chǔ)設(shè)施里所有的 web 工具，比如 Jest 和 Webdriver 。

易訪問性

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

我們必須應(yīng)對(duì)的挑戰(zhàn)

獲得正確的日志

視頻日志有助于我們了解人們?nèi)绾问褂靡曨l播放器以及播放器的工作情況。我們會(huì)向公眾分享一些數(shù)據(jù)，例如視頻觀看次數(shù)和視頻發(fā)布者，而我們會(huì)使用其他的一些數(shù)據(jù)來確定應(yīng)該將多少以及哪些視頻展現(xiàn)給人們。我們必須確保在同一場(chǎng)景中，新的視頻播放器記錄的數(shù)據(jù)和老的播放器記錄的數(shù)據(jù)一致。由于配置差異和其他的一些細(xì)節(jié)，要做到這一點(diǎn)異常的困難。為確保日志數(shù)據(jù)的正確性，我們創(chuàng)建了一個(gè)測(cè)試套件，在相同的用戶交互場(chǎng)景下，同時(shí)運(yùn)行兩個(gè)視頻播放器，然后驗(yàn)證日志記錄是否一致。這樣，我們才能確保新的 HTML5 視頻播放器的報(bào)告數(shù)據(jù)會(huì)有一個(gè)很高的可信度。

瀏覽器 bug

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

在舊瀏覽器上的糟糕表現(xiàn)

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

頁面加載時(shí)間變長(zhǎng)

我們?cè)谕瞥?/span> HTML5 播放器時(shí)面臨的最后一個(gè)主要問題是，加載 Facebook 的時(shí)間變長(zhǎng)了。在 Facebook，我們十分關(guān)心我們提供給人們的體驗(yàn)。用戶需要多久加載 Facebook 是我們衡量用戶體驗(yàn)的一個(gè)重要因素。當(dāng)我們發(fā)布了 HTML5 播放器后，我們注意到，用戶平均加載 Facebook 所花費(fèi)的時(shí)間有所增加。通過修復(fù)幾個(gè)小的性能問題，并進(jìn)行了多項(xiàng)細(xì)微的優(yōu)化，我們終于看到了一個(gè)讓我們感到高興的水平。

對(duì)指標(biāo)和用戶體驗(yàn)的影響

使用 HTML5 視頻技術(shù)不僅簡(jiǎn)化了我們開發(fā)過程，同時(shí)也提高了人們?cè)?Facebook 上的視頻體驗(yàn)。切換到 HTML5 后，視頻的播放速度更快了，人們點(diǎn)贊、評(píng)論和分享視頻的數(shù)量更多了，并且用戶報(bào)告的錯(cuò)誤更少了。我們做出這項(xiàng)調(diào)整后，人們似乎開始在視頻上花費(fèi)更多的時(shí)間。

視頻是你與周圍的世界進(jìn)行互聯(lián)的一個(gè)精彩渠道，而我們很高興地看到我們?cè)谑褂?/span> HTML5 技術(shù)后，能使 Facebook 的視頻體驗(yàn)變得更好。

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