HTMLVideoElement：enterpictureinpicture 事件

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

enterpictureinpicture 事件会在 HTMLVideoElement 成功进入画中画模式时触发。

此事件不可取消，也不会冒泡。

语法

在 addEventListener()使用事件的名称，或者设置事件处理器属性。

js
addEventListener("enterpictureinpicture", (event) => {});

onenterpictureinpicture = (event) => {};

事件类型

PictureInPictureEvent。继承自 Event。

Event PictureInPictureEvent

事件属性

此接口继承他的父类 Event 的属性。

示例

这些示例为 enterpictureinpicture 事件添加事件侦听器，然后在该事件处理程序对事件触发做出反应时发布消息。

使用 addEventListener():

js
const video = document.querySelector("#video");
const button = document.querySelector("#button");

function onEnterPip() {
  console.log("画中画模式已激活！");
}

video.addEventListener("enterpictureinpicture", onEnterPip, false);

button.onclick = () => {
  video.requestPictureInPicture();
};

使用事件处理器属性 onenterpictureinpicture：

js
const video = document.querySelector("#video");
const button = document.querySelector("#button");

function onEnterPip() {
  console.log("画中画模式已激活！");
}

video.onenterpictureinpicture = onEnterPip;

button.onclick = () => {
  video.requestPictureInPicture();
};

规范

Specification
Picture-in-Picture
# eventdef-htmlvideoelement-enterpictureinpicture
Picture-in-Picture
# dom-htmlvideoelement-onenterpictureinpicture

浏览器兼容性

BCD tables only load in the browser

参见