应检查 video 元素的 requestPictureInPicture 是否为函数，而非 document.pictureInPictureEnabled；该属性已废弃且不可靠，正确检测需结合 API 存在性、readyState、disablePictureInPicture 属性及用户手势上下文。

如何判断浏览器是否支持画中画（Picture-in-Picture）

直接查 document.pictureInPictureEnabled 不可靠，它在现代 Chrome/Firefox 中早已被移除，且从未是标准 API。真正有效的检测方式是检查 document.createElement('video').requestPictureInPicture 是否为函数。

为什么 document.pictureInPictureEnabled 不能用

这个属性只在 Chrome 70–79 的极短窗口期存在过，之后被废弃；Firefox 从未实现；Safari 完全不支持该属性。即使它返回 true，也不代表 requestPictureInPicture() 能成功调用——比如页面未用户手势触发、视频未加载元数据、或视频设置了 disablePictureInPicture 属性。

• document.pictureInPictureEnabled 在 Chrome 80+ 返回 undefined
• Safari 16.4+ 支持画中画，但该属性始终为 undefined
• 仅靠属性值无法区分“API 存在”和“当前可进入画中画”

正确检测 + 安全调用的写法

分两步：先确认 API 可用性，再检查当前 video 元素是否满足进入条件。推荐封装成工具函数：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

function canUsePictureInPicture(videoEl) {
  if (!videoEl || typeof videoEl.requestPictureInPicture !== 'function') return false;
  // 必须已加载元数据，且未被禁用
  if (!videoEl.readyState >= HTMLMediaElement.HAVE_METADATA) return false;
  if (videoEl.hasAttribute('disablePictureInPicture')) return false;
  return true;
}

// 使用示例
const video = document.querySelector('video');
if (canUsePictureInPicture(video)) {
  video.addEventListener('click', () => video.requestPictureInPicture());
}

• 必须在用户手势（如 click、keydown）回调中调用 requestPictureInPicture()
• 若视频是 autoplay 但未静音，Safari 会拒绝画中画请求
• 移动端（iOS Safari）完全不支持画中画，检测时需结合 navigator.userAgent 或 matchMedia('(pointer: coarse)') 做降级

常见失败原因和调试提示

调用 requestPictureInPicture() 报错 NotAllowedError 是最常遇到的问题，不是 API 不支持，而是上下文不合规：

立即学习“前端免费学习笔记（深入）”；

• 未在用户手势事件处理函数内调用（例如放在 setTimeout 或 load 回调里）
• 视频尚未触发 loadedmetadata 事件（readyState 小于 1）
• 视频元素设置了 disablePictureInPicture 属性或 controlsList="nodownload" 等限制属性
• 页面处于 iframe 中且缺少 allow="picture-in-picture" 权限声明

真正在意兼容性时，别只盯着 API 存不存在——得盯住「此刻能不能进」。很多项目卡在这一步，不是因为不会写，而是没意识到画中画是个受多重运行时约束的交互状态，不是简单的开关。