html5 标签通过 allowpictureinpicture 属性和 requestpictureinpicture() 方法原生支持画中画模式，chrome 70+、edge 79+、safari 14.1+ 支持，firefox 不支持；需在用户手势中调用，可监听 enter/leave 事件并主动退出。
HTML5 <video></video> 标签原生支持画中画（Picture-in-Picture，PiP）模式，只需添加 allowpictureinpicture 属性，并配合 JavaScript 调用 requestPictureInPicture() 方法即可触发。浏览器兼容性需注意：Chrome 70+、Edge 79+、Safari 14.1+（macOS/iOS）已支持，Firefox 目前不支持。
启用 PiP 的基础 HTML 结构
在 <video></video> 标签中添加 allowpictureinpicture 属性，这是开启 PiP 功能的前提。该属性告诉浏览器：该视频允许进入画中画模式。
示例：
通过 JavaScript 主动触发 PiP
用户点击按钮或满足特定条件时，可调用 video.requestPictureInPicture() 方法进入 PiP 模式。该方法返回一个 Promise，成功后视频窗口将浮在其他页面内容之上。
注意事项：
- 必须在用户手势（如
click、touchend）触发的事件处理函数中调用，否则会被浏览器拒绝 - 若视频未播放或处于静音状态，部分浏览器（如 Safari）可能限制 PiP 启动
- 调用前建议检查
document.pictureInPictureElement是否为null，避免重复进入
监听 PiP 状态变化
可通过监听 enterpictureinpicture 和 leavepictureinpicture 事件，实时响应 PiP 模式的切换。
示例：
const video = document.querySelector('video');video.addEventListener('enterpictureinpicture', () => {
console.log('已进入画中画模式');
});
video.addEventListener('leavepictureinpicture', () => {
console.log('已退出画中画模式');
});
退出 PiP 的方式
用户可通过 PiP 窗口上的关闭按钮手动退出；开发者也可主动调用 document.exitPictureInPicture() 退出（需在同源上下文中）。
常见适用场景：
- 播放中收到通知或切换页面时自动退出 PiP
- 自定义控件中添加“退出画中画”按钮
- 检测到
document.pictureInPictureElement !== video时清理相关状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
