如何在任何网站上实现画中画功能
如何在任何网站上实现画中画功能
添加到任何网站都是一个非常酷的功能，而且它比你想象的更容易实现。
画中画 API 是添加到一些现代浏览器的最新功能之一，它使网站能够创建一个浮动视频窗口，该窗口将位于所有其他窗口之上，让用户可以继续观看视频当他与其他网站以及他设备上的其他应用程序进行交互时。
在本文中，我们将使用 vanilla Javascript 从头开始实现画中画，但在开始之前，先看看我们将通过这篇文章做什么：
让我们从 HTML 部分开始，我们只需要一个 视频 标签和一个按钮，将启用和禁用画中画功能：
<video id="video" controls playsinline src="https://player.vimeo.com/external/517074808.sd.mp4?s=2a6149b02f93d4b52519798bbb878dcd82a54b30&profile_id=164&oauth2_token_id=57447761"></video>
<div>
<button id="button" hidden disabled>启用画中画</button>
</div>
对于 Javascript 部分，让我们首先获取我们的 视频 和 按钮 ：
常量视频 = document.getElementById('video');
常量按钮= document.getElementById('button');
接下来，由于这个特性是新的，并且它不兼容所有浏览器（在撰写本文时），我们必须检查当前浏览器是否支持它，让我们添加一些javascript：
if ('pictureInPictureEnabled' in document) {
// 如果浏览器支持画中画，这里的代码就会运行
}
现在我们可以为按钮添加一个点击事件监听器，以启用画中画功能，但在此之前，我们必须显示并启用按钮，因为正如您在 HTML 中看到的那样，按钮是隐藏的并且默认禁用：
if ('pictureInPictureEnabled' in document) {
button.disabled = false;
button.hidden = false;
button.addEventListener('click', function() {
video.requestPictureInPicture();
});
}
现在，我们的 PIP 功能正在工作，我们只需要单击按钮启用它，让我们使按钮动态，单击它启用它，如果再次单击它将禁用它：
if ('pictureInPictureEnabled' in document) {
button.disabled = false;
button.hidden = false;
button.addEventListener('click', function() {
如果（document.pictureInPictureElement）{
document.exitPictureInPicture();
} 别的 {
video.requestPictureInPicture();
}
});
}
我们用了 document.pictureInPictureElement 检查页面上是否有使用 PIP 的元素，如果有， document.exitPictureInPicture() 如果没有，将使 PIP 元素恢复其原始格式（普通视频），然后我们只需在视频上启用 PIP。
我们的 PIP 功能运行良好，我们可以通过单击按钮来启用和禁用它，但我们还有最后一件事要做，按钮上的文本是 启用画中画 当我们点击它并启用 PIP 时，文本应该是 禁用画中画 正确的？我们开工吧：
video.addEventListener('enterpictureinpicture', () => {
button.textContent = '启用画中画';
});
video.addEventListener('leavepictureinpicture', () => {
button.textContent = '禁用画中画';
});
入画中画 和 离开图片中的图片 是由画中画 API 定义的两个有用的事件，它们完全按照它们的名称执行。
- 入画中画 将在启用 PIP 时触发。
- 离开图片中的图片 将在 PIP 禁用时触发。
而已！自己去试试吧。
Picture-in-Picture API 仍处于早期阶段，因此并非所有浏览器都支持，请务必谨慎使用。
我可以用吗 .. 2022 年 8 月 25 日
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
