React中如何检测Chrome等浏览器PIP（画中画）关闭按钮的点击事件

云上老周

2026-9-27

错误原因

Cannot read properties of null报错的根因是document.getElementById('pipButton')返回了空值，触发场景有两类：

JS代码执行时DOM还未完成渲染，按钮元素还没有被加载到文档流中
页面中不存在id为pipButton的元素，id拼写错误、大小写不匹配或者遗漏了按钮DOM的定义

修复方案

第一步：校验DOM定义

确保HTML中存在对应元素，示例参考：

<video id="video" controls src="替换为你的视频资源地址"></video>
<button id="pipButton">切换画中画</button>

第二步：修正JS逻辑

需要等待DOM加载完成后再执行元素选择逻辑，同时补全你缺失的画中画开启逻辑，以及兼容性判断：

document.addEventListener('DOMContentLoaded', () => {
  const video = document.getElementById('video');
  const pipButton = document.getElementById('pipButton');

  // 前置校验避免空值报错
  if (!video || !pipButton) {
    console.error('缺失视频元素或PIP按钮，请检查id配置');
    return;
  }

  // 浏览器兼容性判断
  if (!('pictureInPictureEnabled' in document) || !document.pictureInPictureEnabled) {
    pipButton.disabled = true;
    console.warn('当前浏览器不支持画中画功能');
    return;
  }

  // 绑定点击事件
  pipButton.addEventListener('click', async () => {
    try {
      if (document.pictureInPictureElement) {
        await document.exitPictureInPicture();
        console.log('已退出画中画');
      } else {
        // 你之前的代码缺失了请求开启PIP的逻辑
        await video.requestPictureInPicture();
        console.log('已进入画中画');
      }
    } catch (err) {
      console.error('画中画操作异常：', err);
    }
  });

  // 若需要监听离开画中画事件，单独绑定即可
  video.addEventListener('leavepictureinpicture', () => {
    console.log('触发离开画中画事件');
  });
});