HTMLVideoElement：leavepictureinpicture 事件

leavepictureinpicture 事件会在 HTMLVideoElement 成功离开画中画模式时触发。

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

语法

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

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

onleavepictureinpicture = (event) => {};

事件类型

PictureInPictureEvent (en-US) 继承自 Event。

Event PictureInPictureEvent (en-US)

事件属性

继承自 Event 的 PictureInPictureEvent (en-US)。

示例

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

使用 addEventListener()：

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

function onExitPip() {
  console.log("画中画模式已停用！");
}

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("画中画模式已停用！");
}

video.onleavepictureinpicture = onExitPip;

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

规范

Specification
Picture-in-Picture
# eventdef-htmlvideoelement-leavepictureinpicture
Picture-in-Picture
# dom-htmlvideoelement-onleavepictureinpicture

浏览器兼容性

BCD tables only load in the browser

参见