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

画中画的好处

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

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

检测画中画支持

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

if(document.pictureInPictureEnabled && !videoElement.disablePictureInPicture
) {// Yay, we can use the feature!
}

使用支持API的浏览器，就该开始了！

启动画中画

在开始画中画之前，重要的是首先检查一下我们是否还没有进入画中画：

if(!document.pictureInPictureElement) {videoElement.requestPictureInPicture();
}

一旦确认未使用PiP，就可以通过在HTMLVideoElement上调用requestPictureInPicture()来启动PiP。

退出画中画

要退出画中画模式，可以调用exitPictureInPicture() ：

document.exitPictureInPicture();

“画中画”窗口将从浏览器底部删除。

安全的画中画功能

汇集提供的代码示例，我们可以结合使用一个安全的画中画实用程序功能：

function enterPictureInPicture(videoElement) {if(document.pictureInPictureEnabled && !videoElement.disablePictureInPicture) {try {if (document.pictureInPictureElement) {document.exitPictureInPicture();}videoElement.requestPictureInPicture();} catch(err) {console.error(err);}}
}

此功能可以安全地将视频放入画中画，同时保护您免受错误或已经画中画的视频的侵害。

画中画活动

除了进入和退出画中画功能外，在每个步骤中还会发射一组JavaScript事件：

• enterpictureinpicture ：在放置在画中画的HTMLVideoElement上触发
• leavepictureinpicture ：在退出PiP的HTMLVideoElement上触发

以下是每个示例的简单示例：

$("#myVideo").addEventListener("enterpictureinpicture", e => {// Entered PiP!
});$("#myVideo").addEventListener("leavepictureinpicture", e => {// Exited PiP!
});

画中画模式是一种了不起的API，可让用户在浏览其他选项卡或仅在页面中浏览时使用视频内容。 结合scroll事件甚至Intersection Observer API ，画中画是您的用户会喜欢的强大功能！

.x-secondary-small {display: none; }@media only screen and (max-width: 600px) {.x-secondary {max-height: none;}.x-secondary-large {display: none;}.x-secondary-small {display: block;} }

翻译自: https://davidwalsh.name/javascript-pip