HTML5视频画中画模式PictureInPicture接口调用-H5教程-PHP中文网

HTML5视频画中画需满足：已加载元数据、用户手势触发、有有效src或MediaSource、HTTPS/localhost环境且浏览器支持；调用requestPictureInPicture()进入，exitPictureInPicture()退出，支持enter/leave事件监听。

html5视频画中画模式pictureinpicture接口调用

HTML5 视频的画中画（Picture-in-Picture，PiP）模式可通过 requestPictureInPicture() 方法触发，但需满足明确的用户交互前提和环境限制。

启用 PiP 的基本条件

不是所有视频都能直接调用 PiP，必须同时满足：

视频元素已加载元数据（loadedmetadata 或 canplay 事件后）
调用必须由用户手势（如 click、tap）触发，不能在异步回调（如 setTimeout、fetch 后）中直接调用
视频需有 src 或通过 MediaSource 正确附加媒体流
浏览器支持且未被策略禁用（如 Chrome 要求页面为 HTTPS 或 localhost，且用户未手动关闭 PiP 权限）

标准调用方式（推荐）

在用户点击按钮时安全调用：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

const video = document.querySelector('#myVideo');
<p>// 确保已可播放
video.addEventListener('canplay', () => {
const pipBtn = document.querySelector('#pipBtn');
pipBtn.addEventListener('click', async () => {
try {
await video.requestPictureInPicture();
console.log('已进入画中画模式');
} catch (err) {
console.warn('无法启用画中画：', err.name || err.message);
// 常见错误：NotAllowedError（非用户手势）、NotSupportedError（不支持）、SecurityError（跨域或策略限制）
}
});
});</p>

监听 PiP 状态变化

可通过 enterpictureinpicture 和 leavepictureinpicture 事件响应状态切换：

video.addEventListener('enterpictureinpicture', () => { /* 进入 PiP */ })
video.addEventListener('leavepictureinpicture', () => { /* 退出 PiP，可恢复 UI 或暂停逻辑 */ })
注意：退出 PiP 后，视频仍保持播放状态，需自行控制是否暂停