为什么 Facebook 要将视频从 Flash 全面迁移到 HTML5？

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 的视频体验变得更好。

标签: html5