如何在浏览器实现画中画观看视频

原文作者：Arnaud Lewis

译者：UC 国际研发 桥川

画中画（PiP）允许用户在浮动窗口中观看视频（总是在其他窗口的顶部），这样他们就可以在与其他站点或应用程序交互时密切关注他们正在观看的内容。

使用新的画中画Web API，您可以在网站上启动和控制视频元素的画中画。 如果你还不知道什么是画中画，可以看看上面的视频效果。

背景

2016年9月，macOS Sierra中的Safari支持了Picture-in-Picture API。 六个月后，在Android O上的Chrome通过使用原生Android API，实现在移动设备上播放画中画视频。 六个月后，我们宣布了构建和标准化Web API的意图，该功能与Safari兼容，允许Web开发者创建和控制围绕画中画的完整体验。我们来了！

一起看看代码实现

进入画中画

让我们从video元