最近,Facebook将网络中的视频几乎全部从Adobe Flash迁移到HTML5。当然,Facebook将继续与Adobe合作,为平台上的游戏提供可靠、安全的Flash体验,但会在所有的浏览器中默认使用 HTML5 技术播放视频。从开发速度到易访问性,HTML5提供了很多好处。
据Facebook 前端高级工程师丹尼尔·保利希介绍,使用Web技术使Facebook能够利用开源社区和Facebook中已有的优秀浏览器工具,不必重新编译代码,并能够在浏览器直接应用变化,从而让Facebook得以快速行动。Facebook有优秀的测试基础设施,迁移到HTML5视频后,工程师可以自由地使用所有的Web工具,比如Jest和Webdriver。HTML5使工程师们能够建立一个完全支持屏幕阅读器和键盘输入访问的播放器,可以利用HTML5提供的辅助工具让视力障碍人士更容易地使用产品。
视频日志有助于Facebook了解用户使用视频播放器的工作情况。Facebook会向公众分享一些数据,例如视频观看次数和视频发布者。丹尼尔·保利希表示,Facebook必须确保在同一场景中,新视频播放器记录的数据和老播放器记录的数据一致,但由于配置差异和其他一些细节,要做到这一点非常困难。为确保日志数据的正确性,Facebook创建了一个测试套件,在相同的用户交互场景下,同时运行两个视频播放器,然后验证日志记录是否一致,这样能确保新的HTML5视频播放器的报告数据有很高的可信度。
在将视频转移到HTML5技术之前,Facebook要解决的一个主要问题是各种浏览器中存在的关于HTML5视频的bug(漏洞)。丹尼尔·保利希介绍说,在Chrome浏览器中,SPDY协议的某个bug会导致浏览器在News Feed上停止加载和播放视频。工程师发现,这个问题是由于同时加载了太多视频而触发的,所以Facebook减少了视频同时加载的数量,并确保如果加载的视频不再需要时会尽快将它们删除。
目前,大多数浏览器都支持HTML5视频。然而,很多老版本浏览器上使用HTML5播放器比使用Flash播放器表现差,用户需要更长的加载时间。因此,Facebook决定首先只在一小部分浏览器上推出HTML5播放器,一旦提升了性能并修复了bug,会逐渐推向更多的浏览器版本和操作系统。
使用HTML5视频技术不仅简化了开发过程,同时也提高了用户在Facebook上的视频体验。切换到HTML5后,视频播放速度更快,用户点赞、评论和分享视频的数量更多了,并且用户报告的错误更少了。Facebook在推出HTML5播放器时面临的最后一个主要问题是:加载时间变长了。用户加载时长是衡量用户体验的一个重要因素,丹尼尔·保利希表示,通过修复几个小的性能问题以及多项细微的优化,终于达到一个令人满意的水平。Facebook做出这项调整后,用户似乎开始在视频上花费更多的时间。