requestpictureinpicture() 是 html5 原生画中画 api，需用户交互触发、视频已加载元数据、未禁用 pip、文档活跃且跨域合规；支持 chrome 70+、edge 79+、safari 14.1+、firefox 100+，需检测兼容性并降级处理。
在现代浏览器中，requestPictureInPicture() 是 HTML5 提供的原生 API，用于将 <video></video> 元素以画中画（PiP）模式播放。它无需插件、不依赖第三方库，只要视频元素满足基本条件，调用即可触发系统级 PiP 窗口。
前提条件：视频必须可播放且用户已交互
浏览器出于策略限制，只有在用户主动操作（如点击、触摸）后才允许进入画中画。自动调用会失败并抛出 NotAllowedError。同时需确保：
- 视频元素已加载元数据（
loadedmetadata或canplay事件后） - 视频未设置
disablePictureInPicture属性 - 当前文档处于活跃状态（页面未被最小化或切换到后台）
- 视频源合法（跨域视频需带
crossorigin属性且服务端支持 CORS）
基础用法：绑定按钮触发 PiP
最常见方式是给自定义按钮绑定点击事件，调用 video.requestPictureInPicture()：
<video id="myVideo" src="video.mp4" controls></video><br><button id="pipBtn">画中画</button><br><br><script><br> const video = document.getElementById('myVideo');<br> const pipBtn = document.getElementById('pipBtn');<br><br> pipBtn.addEventListener('click', async () => {<br> try {<br> await video.requestPictureInPicture();<br> console.log('已进入画中画');<br> } catch (err) {<br> console.error('无法进入画中画:', err);<br> }<br> });<br></script>
监听 PiP 状态变化
可通过 enterpictureinpicture 和 leavepictureinpicture 事件感知状态切换：
-
video.addEventListener('enterpictureinpicture', () => { ... })—— 进入 PiP 时触发 -
video.addEventListener('leavepictureinpicture', () => { ... })—— 退出 PiP（用户关闭或切回页面）时触发
这两个事件适合更新 UI 状态（如按钮文字、暂停主页面播放逻辑等）。
兼容性与降级处理
Chrome 70+、Edge 79+、Safari 14.1+（macOS/iOS）、Firefox 100+ 支持该 API。使用前建议检测：
if ('requestPictureInPicture' in video) {<br> // 支持 PiP<br>} else {<br> pipBtn.disabled = true;<br> pipBtn.textContent = '不支持画中画';<br>}
注意：Safari 中需额外确保视频有 playsinline 属性，否则在 iOS 上可能无法正常触发；移动端部分 Android 浏览器（如旧版 Chrome）需启用实验性标志才能生效，但主流版本已默认开启。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
