javascript画曲线_JavaScript画中画API

javascript画曲线

As a huge fan of media on the web, I'm always excited about enhancements to how we can control our media. Maybe I get excited about simple things like the <video> tag and its associated elements and attributes because media on the web started with custom codecs, browser extensions, and Flash. The latest awesome media feature I'm excited about on the web is Picture-in-Picture, a native web API that displays docked video. Let's have a look at how it works!

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

View Demo 观看演示

画中画的好处 (Benefits of Picture-in-Picture)

Before using Picture-in-Picture, it's important to know why to use it and the benefits you get:

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

• No need to create your own docked video element when the user scrolls -- the browser does it for you!
  用户滚动时无需创建自己的停靠视频元素-浏览器会为您完成！
• Big performance, usability, and maintenance win
  出色的性能，可用性和维护优势
• The docked video displays above all tabs in your browser, not just the tab it was launched in
  停靠的视频显示在浏览器中所有标签的上方，而不仅仅是在其中启动的标签
• Stays in PiP mode until you change pages
  保持在画中画模式，直到您更改页面

检测画中画支持 (Detect Picture-in-Picture Support)

Before using any API it's best to ensure the feature is supported and enabled; for that the browser exposes document.pictureInPictureEnabled, as well as a per-video attribute:

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

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

With the browser supporting the API, it's time to get started!

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

启动画中画 (Launching Picture-In-Picture)

Before launching into picture-in-picture, it's important to first check that we aren't already in PiP:

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

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

Once we confirm that PiP isn't being used, we can launch PiP by calling requestPictureInPicture() on the HTMLVideoElement.

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

退出画中画 (Exiting Picture-in-Picture)

To exit Picture-in-Picture mode, you can call exitPictureInPicture():

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

document.exitPictureInPicture();

The PiP window will be removed from the bottom of your browser.

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

安全的画中画功能 (Safe Picture-in-Picture Function)

Bringing together the code samples provided, we can put together a safe Picture-in-Picture utility function:

将提供的代码示例汇总在一起，我们可以汇总一个安全的画中画实用程序功能：

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

This function can safely put your video into Picture-in-Picture while protecting you from errors or videos already PiP.

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

画中画活动 (Picture-in-Picture Events)

Along with the functionality to enter and exit Picture-in-Picture, a set of JavaScript events are emitted during each step:

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

• enterpictureinpicture: fired on the HTMLVideoElement that was placed into Picture-in-Picture

  enterpictureinpicture ：在放置在画中画的HTMLVideoElement上触发

• leavepictureinpicture: fired on the HTMLVideoElement for which PiP was exited

  leavepictureinpicture ：在退出PiP的HTMLVideoElement上触发

Here's a quick example of each:

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

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

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

View Demo 观看演示

Picture-in-Picture mode is an amazing API to allow users to consume video content as they explore other tabs or simply navigate within your page. Coupled with the scroll event or even with Intersection Observer API, Picture-in-Picture is a powerful feature your users will love!

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

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

javascript画曲线