如何通过JavaScript获取Picture In Picture关闭按钮触发事件

云原生阿岚

2026-8-26

screenshot

浏览器没有对外暴露画中画（Picture In Picture）原生窗口关闭按钮的专属点击事件，也不允许前端获取画中画原生窗口的内部DOM做事件绑定，通过监听视频元素的画中画退出状态事件，就能精准捕获关闭按钮触发的窗口关闭行为，具体实现如下：

基础实现（所有退出场景通用）

不管用户是点击画中画窗口自带的关闭按钮、点击窗口的返回标签页按钮，还是前端代码主动调用API退出画中画，都会触发video元素上的leavepictureinpicture事件，直接在这个事件回调里写业务逻辑即可：

// 绑定画中画功能对应的视频元素
const video = document.querySelector('video');

video.addEventListener('leavepictureinpicture', () => {
  // 此处编写关闭画中画后需要执行的业务逻辑，例如重置播放状态、上报用户行为、恢复页面布局等
  console.log('画中画窗口已关闭');
});

区分「用户点关闭按钮」和「代码主动退出」场景

如果你的业务需要排除代码主动调用API退出的场景，只响应用户手动点击关闭按钮的操作，可以通过标记位做判断：

// 标记是否为代码主动触发的画中画退出
let isManualExitByApi = false;

// 封装代码主动退出画中画的方法
async function closePipByApi() {
  isManualExitByApi = true;
  await document.exitPictureInPicture();
  isManualExitByApi = false;
}

video.addEventListener('leavepictureinpicture', () => {
  // 代码主动触发的退出直接跳过，不执行业务逻辑
  if (isManualExitByApi) return;
  // 此处逻辑仅在用户手动点击画中画关闭按钮、或者其他非代码主动触发的退出场景下执行
  console.log('用户手动关闭了画中画窗口');
});