JavaScript画中画API

小灰灰 2023-02-21 14:23 17阅读 0赞

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

[观看演示][Link 1]

## **画中画的好处** ##

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

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

## **检测画中画支持** ##

在使用任何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();

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

## **安全的画中画功能** ##

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

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

## **画中画活动** ##

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

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

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

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

[观看演示][Link 1]

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

> 翻译自: [https://davidwalsh.name/javascript-pip][https_davidwalsh.name_javascript-pip]

[Link 1]: https://davidwalsh.name/demo/javascript-pip.php
[Intersection Observer API]: https://davidwalsh.name/intersection-observers
[https_davidwalsh.name_javascript-pip]: https://davidwalsh.name/javascript-pip