LinkedIn Feed流视频自动播放架构演进

为提升用户观看体验，LinkedIn视频团队一直努力完善其视频自动播放功能。本文概述了LinkedIn自动播放产品标准，以及为实现此标准所开发的技术与架构。

文/ Evan Farina

译/ 元宝

审校/ John

原文 

https://engineering.linkedin.com/blog/2019/03/feature-highlight--scaling-autoplay-videos-for-hundreds-of-milli

我们的视频团队始终致力于提升用户观看视频体验。在2016年底，LinkedIn的视频功能还处于雏形阶段，包括自动播放在内的一系列功能仍未成为现实。两年过去了，虽然自动播放已经成为LinkedIn实现良好视频播放体验的一个不可或缺的部分，但由于复杂的产品需求与遗留的性能问题，这一功能仍待我们去完善。本文将概述我们的自动播放产品标准和工程师为支持这一标准所开发的技术与架构，还有我们在构建这个可承载数亿规模用户的自动播放解决方案时遇到的一系列性能挑战。

技术用词

这篇文章将引用下列前端技术，关键词及定义如下：

• iframe： iframe是一个可以在其自身内部呈现外部网页内容的元素。在LinkedIn，我们借助iframe实现将来自第三方域名（YouTube、Vimeo）的视频直接呈现于LinkedIn网站。

• 播放窗口（或“视觉重点窗口”）：用户直接看到的播放视频的窗口。

• Spaniel： LinkedIn的内部解决方案，用于跟踪元素进出Viewport时的情况。

• postMessage： postMessage是一种本机浏览器技术，它允许不同域上的两个网站相互通信。本质上，我们使用postMessage与第三方域提供的视频API进行交互。

• 发布-订阅（pub-sub）模式：应用程序所使用的通信模式，其中的程序化事件并不会发送给特定订阅者，而是在不知道应用程序中有哪些组件可能订阅事件的情况下盲目地发出。

• 去抖动：在给定时间范围内，限制对特定方法的调用次数。多用于处理可能导致网页出现问题的特殊用户交互行为（例如，快速滚动页面）。

• DOM：将web页面表示为由许多内容节点组成的树。

产品标准

从工程和产品角度来看，自动播放是我们视频团队所构建的最复杂的功能之一，自动播放的关键在于细节上确保万无一失。为实现这一点我们着重关注了以下几个关键标准ÿ