JavaScript画中画API

作为网络媒体的忠实拥护者，我一直为能够控制媒体的方式而感到兴奋。 也许我对<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

相关资源：一个移动端H5Video标签播放视频的实现