HTMLVideoElement: leavepictureinpicture 事件

有限可用性

此功能不是基线功能，因为它在一些最广泛使用的浏览器中不起作用。

当 HTMLVideoElement 成功退出画中画模式时，将触发 leavepictureinpicture 事件。

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

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

onleavepictureinpicture = (event) => {};

事件类型

一个 PictureInPictureEvent。继承自 Event。

Event PictureInPictureEvent

事件属性

此接口还继承其父级 Event 的属性。

示例

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

使用 addEventListener()

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

function onExitPip() {
  console.log("Picture-in-Picture mode deactivated!");
}

video.addEventListener("leavepictureinpicture", onExitPip, false);

button.onclick = () => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
};

使用 onleavepictureinpicture 事件处理程序属性

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

function onExitPip() {
  console.log("Picture-in-Picture mode deactivated!");
}

video.onleavepictureinpicture = onExitPip;

button.onclick = () => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
};

规范

规范
画中画
# eventdef-htmlvideoelement-leavepictureinpicture
画中画
# dom-htmlvideoelement-onleavepictureinpicture

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅