Firefox中如何使用JS/TS检测picture-in-picture(PiP)模式实现模态框隐藏

核心实现逻辑 #

Firefox 68及以上版本完全支持W3C标准的PiP事件，你遇到的无触发问题大概率是没有从videojs的封装中拿到原生video元素监听事件，按以下步骤实现即可：

1. 从videojs实例获取原生video对象 #

videojs会对原生video标签做一层封装，直接监听videojs实例的事件不会触发浏览器原生PiP回调，需先获取原生DOM节点：

// 此处的this.player是你初始化的videojs实例
const nativeVideo: HTMLVideoElement = this.player.el().querySelector('video');

2. 监听PiP状态变更事件 #

直接在原生video节点上监听两个标准事件即可覆盖所有PiP触发场景，包括用户手动点击浏览器自带PiP按钮、右键菜单触发、JS主动调用等：

// 进入PiP模式时触发，执行隐藏模态框逻辑
nativeVideo.addEventListener('enterpictureinpicture', () => {
  this.isModalVisible = false;
  // 此处可补充你的其他业务逻辑
});

// 可选：退出PiP模式时触发，按需恢复模态框展示
nativeVideo.addEventListener('leavepictureinpicture', () => {
  this.isModalVisible = true;
});

降级兼容方案 #

如果遇到极端场景事件不触发，可以加定时检测逻辑做兜底：

private pipCheckTimer: number | null = null;

// 模态框打开时启动检测
startPipCheck() {
  this.pipCheckTimer = window.setInterval(() => {
    // document.pictureInPictureElement指向当前处于PiP状态的DOM节点，不在PiP模式时值为null
    if (document.pictureInPictureElement === nativeVideo && this.isModalVisible) {
      this.isModalVisible = false;
    }
  }, 500);
}

// 组件销毁/模态框关闭时清除定时器，避免内存泄漏
ngOnDestroy() {
  if (this.pipCheckTimer) {
    clearInterval(this.pipCheckTimer);
    this.pipCheckTimer = null;
  }
}

注意事项 #

• 若TypeScript出现PiP事件相关的类型报错，可以扩展HTMLVideoElement的事件类型定义，或临时将事件名强转为as string避免编译报错
• 测试前确认Firefox的PiP功能处于开启状态，默认配置下无需修改，若有异常可在about:config页检查media.videocontrols.picture-in-picture.enabled配置项的值为true

内容的提问来源于stack exchange，提问作者Aedor