JavaScript画中画API

作为网络媒体的忠实拥护者，我一直为能够控制媒体的方式而感到兴奋。 也许我对<video>标签及其相关元素和属性之类的简单事物感到兴奋，因为网络上的媒体始于自定义编解码器，浏览器扩展和Flash。 我在网络上兴奋的最新真棒媒体功能是画中画（Picture-in-Picture），这是一种本地Web API，用于显示停靠的视频。 让我们看看它是如何工作的！

观看演示

画中画的好处

在使用画中画之前，重要的是要知道为什么使用它以及从中获得的好处：

• 用户滚动时无需创建自己的停靠视频元素-浏览器会为您完成！
• 出色的性能，可用性和维护优势
• 停靠的视频显示在浏览器中所有标签的上方，而不仅仅是在其中启动的标签
• 保持在画中画模式，直到您更改页面

检测画中画支持

在使用任何API之前，最好确保已支持和启用该功能。 为此，浏览器将显示document.pictureInPictureEnabled以及每个视频属性：

if(
    do