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) => {};

事件类型

事件属性

此接口继承他的父类 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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
enterpictureinpicture event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

参见