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

2016年01月29日 39 分類：HTML5開發(fā)方案

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