HTML画中画（PiP）失败主因是浏览器校验链断裂：必须由用户手势（如click）触发、video已加载元数据（readyState≥HAVE_METADATA）、iframe需添加allow="picture-in-picture"属性，缺一即报NotAllowedError或静默失败。
HTML画中画（PiP）本身不是“不支持小窗播放”，而是根本没被浏览器允许启动——90%的失败都卡在 requestPictureInPicture() 被静默拒绝，不是功能缺失，是校验链断了。
为什么调用 requestPictureInPicture() 直接报错或无反应
浏览器会同时检查三件事：用户是否真的点过、视频是否已加载元信息、当前上下文是否被授权。漏掉任意一个，API 就会抛 NotAllowedError 或直接静默失败。
- 必须由用户手势触发：
click、touchend、pointerup回调里调用，不能放在autoplay后、loadeddata事件里，更不能塞进setTimeout - video 必须满足就绪条件：
video.readyState >= HTMLMediaElement.HAVE_METADATA，可用video.onloadedmetadata确保 - 若 video 在 iframe 里，父页面的
<iframe>标签必须带allow="picture-in-picture"，多层嵌套时每层都要加 - 移动端 iOS Safari 不响应 JS 主动调用，只响应系统控制中心的手势，JS 只能监听
enterpictureinpicture做状态同步
Chrome / Edge 里右键菜单没有「画中画」选项
不是插件或设置问题，大概率是页面 video 元素未通过基础策略校验——浏览器连菜单项都不会渲染出来。
- 检查地址栏右侧是否有媒体控制卡片（音符图标），有说明浏览器已识别媒体，但页面可能未暴露控件或禁用了上下文菜单
- 手动访问
chrome://flags/#enable-picture-in-picture和chrome://flags/#enable-surfaces-for-videos，确保两项均为Enabled - 若 video 设置了
controls="false"，右键菜单会被禁用；临时加上controls属性可验证是否恢复菜单 - 某些网站（如优酷网页版）主动移除了右键菜单里的 PiP 项，此时只能靠地址栏媒体卡片或开发者工具执行
document.querySelector('video').requestPictureInPicture()
嵌入第三方视频（YouTube、腾讯视频）无法启用 PiP
你拿不到 iframe 内部的 video 元素，requestPictureInPicture() 无法跨域调用——这不是兼容性问题，是安全限制。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- YouTube iframe 默认不开放 PiP 控制接口，即使加了
allow="picture-in-picture"，也仅用于其自身内部逻辑 - 自建嵌入页可约定 postMessage 协议：父页发
{ type: 'pip-enter' }，子页收到后在其内部调用video.requestPictureInPicture()，但务必校验e.origin - 别试图用
document.querySelectorAll('iframe')[0].contentDocument访问跨域 iframe，会触发 SecurityError - 如果只是想关掉自动小窗（比如优酷 App），那是客户端设置，和 HTML5 PiP 完全无关——去 App 里关「我的 → 设置 → 自动小窗播放」
::picture-in-picture-play 样式不起作用
这个伪类只影响原页面上那个 video 元素的样式，不是用来改小窗本身的外观——小窗窗口由操作系统绘制，网页 CSS 对它完全不可见、不可控。
- 它只在视频真正进入 PiP 状态后才生效，且只匹配原始
<video>元素（不是副本） - 常见用途：设
opacity: 0.3或display: none避免原视频区域留白干扰布局 - 搭配 JavaScript 使用更可靠：监听
enterpictureinpicture事件后，手动给 video 加 class，再用普通 CSS 控制 - 注意：Safari 目前不支持
::picture-in-picture-play，需 fallback 到事件监听 + class 切换
最常被忽略的一点：PiP 是逐个元素申请的，document.pictureInPictureElement 永远只指向当前正在 PiP 中的那个 video，切换不同视频时必须先 exitPictureInPicture() 再重新请求——没人告诉你它不支持多实例，但事实就是如此。
