如何在HTML中实现video标签的画中画模式-html教程-PHP中文网

video标签开启画中画必须由用户手势触发，如click或touchend事件调用requestpictureinpicture()；video需处于播放状态、未设disablepictureinpicture、正确配置playsinline和webkit-playsinline；应监听enterpictureinpicture/leavepictureinpicture事件而非轮询document.pictureinpictureelement；退出时需兼容旧浏览器，优先document.exitpictureinpicture()，失败则手动暂停并尝试续播。

如何在html中实现video标签的画中画模式

video 标签开启画中画需要用户手势触发

浏览器强制要求 pictureInPictureElement 或 requestPictureInPicture() 必须由用户主动操作（如 click、touchend）触发，不能在页面加载、autoplay 后自动调用，否则会静默失败或抛出 NotAllowedError。

常见错误现象：直接在 loadedmetadata 或 play 回调里调用 requestPictureInPicture()，控制台显示 DOMException: Document not allowed to use Picture-in-Picture mode。

必须绑定到显式用户事件，例如：button.addEventListener('click', () => video.requestPictureInPicture())
不能依赖 setTimeout 或异步延迟“绕过”限制
移动端 Safari 对手势更严格，需确保事件是 touchend 且未被 preventDefault() 干扰

video 元素必须支持画中画且未被禁用

不是所有 video 都能进画中画——浏览器会检查播放状态、属性和上下文。以下任一条件不满足，requestPictureInPicture() 会拒绝：

video 未处于播放中（paused === false 且有音频/视频帧正在渲染）
设置了 disablePictureInPicture 属性（<video disablepictureinpicture></video>）
使用了 playsinline 但未配合 webkit-playsinline（iOS Safari 必须同时写两个）
视频源为 blob URL 或 CORS 受限资源，且响应头缺失 Content-Disposition: inline 或跨域许可

验证方法：在 DevTools 控制台执行 video.checkMediaCapabilities?.pictureInPicture（非标准，仅作参考），更可靠的是捕获 catch 错误并打印 err.name。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

监听画中画进入/退出状态要靠事件而非属性轮询

document.pictureInPictureElement 是只读属性，反映当前全局画中画元素，但它变化滞后、不可靠；正确方式是监听 enterpictureinpicture 和 leavepictureinpicture 事件。

video.addEventListener('enterpictureinpicture', () => {
  console.log('已进入画中画');
  // 可在此暂停主界面其他动画、隐藏控制栏等
});
video.addEventListener('leavepictureinpicture', () => {
  console.log('已退出画中画');
  // 可恢复 UI 状态
});

注意：这两个事件只在 video 元素上触发，不是 document；且 leavepictureinpicture 在用户点击关闭按钮、切换 Tab 或调用 document.exitPictureInPicture() 时都会触发。

退出画中画的兼容写法要兜底

退出画中画不能只调 document.exitPictureInPicture()，因为部分旧版 Chrome（≤94）和 Safari（≤15.4）不支持该方法，需 fallback 到 video.disablePictureInPicture + 播放控制。

优先尝试 document.exitPictureInPicture()，捕获 NoActivePictureInPictureError 表示当前未启用
若失败，检查 document.pictureInPictureElement === video，再手动 video.pause() 并重置 UI
不要依赖 video.webkitSetPresentationMode?.('inline')（已废弃，仅 iOS 旧版有效）

真正容易被忽略的是：画中画窗口关闭后，video 的 paused 状态不一定恢复——它可能保持 true，需手动 video.play().catch(() => {}) 尝试续播（取决于 autoplay 策略和用户设置）。