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

編者按：非死book 前端高級工程師 Daniel Baulig 解釋了 非死book 為什么要將視頻全面遷移到 HTML5，包括這樣做的好處，帶來的挑戰和解決辦法。

最近，我們將 非死book 網絡中的所有視頻全部從 Adobe Flash 遷移到了 HTML5。我們將繼續與 Adobe 合作，為我們平臺上的游戲提供一個可靠、安全的 Flash 體驗，但我們會在所有的瀏覽器中默認使用 HTML5 技術播放視頻。

從開發速度到易訪問性，HTML5 提供了很眾多好處。非死book 體系龐大，需求復雜，遷移到 HTML5 能讓我們更好地去提升創新的速度和規模。

HTML5 的優點

開發速度

使用 Web 技術使我們能夠利用開源社區和 非死book 中已有的優秀瀏覽器工具，不必重新編譯代碼，并能夠在瀏覽器直接應用變化，從而讓我們得以快速行動。

可測性

我們在 非死book 有一個優秀的測試基礎設施。遷移到 HTML5 視頻后，我們可以自由地使用自己基礎設施里所有的 web 工具，比如 Jest 和 Webdriver 。

易訪問性

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

我們必須應對的挑戰

獲得正確的日志

視頻日志有助于我們了解人們如何使用視頻播放器以及播放器的工作情況。我們會向公眾分享一些數據，例如視頻觀看次數和視頻發布者，而我們會使用其他的一些數據來確定應該將多少以及哪些視頻展現給人們。我們必須確保在同一場景中，新的視頻播放器記錄的數據和老的播放器記錄的數據一致。由于配置差異和其他的一些細節，要做到這一點異常的困難。為確保日志數據的正確性，我們創建了一個測試套件，在相同的用戶交互場景下，同時運行兩個視頻播放器，然后驗證日志記錄是否一致。這樣，我們才能確保新的 HTML5 視頻播放器的報告數據會有一個很高的可信度。

瀏覽器 bug

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

在舊瀏覽器上的糟糕表現

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

頁面加載時間變長

我們在推出 HTML5 播放器時面臨的最后一個主要問題是，加載 非死book 的時間變長了。在 非死book，我們十分關心我們提供給人們的體驗。用戶需要多久加載 非死book 是我們衡量用戶體驗的一個重要因素。當我們發布了 HTML5 播放器后，我們注意到，用戶平均加載 非死book 所花費的時間有所增加。通過修復幾個小的性能問題，并進行了多項細微的優化，我們終于看到了一個讓我們感到高興的水平。

對指標和用戶體驗的影響

使用 HTML5 視頻技術不僅簡化了我們開發過程，同時也提高了人們在 非死book 上的視頻體驗。切換到 HTML5 后，視頻的播放速度更快了，人們點贊、評論和分享視頻的數量更多了，并且用戶報告的錯誤更少了。我們做出這項調整后，人們似乎開始在視頻上花費更多的時間。

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

本文編譯自： code.非死book.com ，如若轉載，請注明出處：http://36kr.com/p/5041377.html

“看完這篇還不夠？如果你也在創業，并且希望自己的項目被報道，請戳這里告訴我們！”