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