html5视频轨道动态切换与画中画（pip）可协同使用，但pip需显式启用allowpictureinpicture属性、用户手势触发，且移动端safari要求playsinline和非静音；轨道切换在pip中实时生效，状态通过enter/leavepictureinpicture事件监听。

HTML5 视频的轨道动态切换和画中画（Picture-in-Picture，PiP）是两个独立但可协同使用的功能。轨道切换（如字幕、音轨）不影响 PiP 启用条件；而 PiP 模式下，视频仍保持原有轨道状态，但需注意：PiP 窗口不支持交互式控件（如字幕开关），所有轨道逻辑必须在主页面预先配置并保持同步。

video 标签必须显式启用画中画能力

即使浏览器支持 PiP（Chrome 70+、Edge 79+、Safari 14.1+），<video></video> 默认禁用该功能。必须添加 allowpictureinpicture 属性（推荐写法，语义清晰），或使用布尔属性 pictureinpicture：

• <video controls src="video.mp4" allowpictureinpicture></video>
• 不要设置 disablepictureinpicture，否则调用 requestPictureInPicture() 会直接失败
• JavaScript 中无法运行时动态开启（videoEl.pictureInPictureEnabled = true 无效），只能在创建元素时或 HTML 中声明

用户手势触发是硬性前提

PiP 必须由明确的用户交互（click、touchend）同步触发，不能在 autoplay 完成、定时器、Promise 回调等异步上下文中调用：

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

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

下载

• 正确：按钮点击事件中直接 await video.requestPictureInPicture()
• 错误：在 video.addEventListener('canplay', () => { setTimeout(() => video.requestPictureInPicture(), 100); }) 中调用
• 移动端 Safari 还要求视频带 playsinline 和 webkit-playsinline，且不能处于静音（muted 会导致拒绝）

轨道切换与 PiP 兼容的关键点

字幕轨（<track></track>）和音轨（video.audioTracks）可在进入 PiP 前或 PiP 中动态切换，但 PiP 窗口本身无 UI，切换需靠主页面逻辑驱动：

• 切换字幕轨后，PiP 窗口会自动显示新激活的 <track kind="subtitles"></track>，无需额外操作
• 切换音轨（如 video.audioTracks[i].enabled = true）同样实时生效，PiP 中声音同步变化
• 退出 PiP 后，视频仍播放，轨道状态保留；若需恢复主页面 UI（如高亮当前字幕语言），应监听 leavepictureinpicture 事件

状态监听与主动退出控制

PiP 状态不会自动反映在 DOM 属性上，必须通过事件手动响应：

• 监听 enterpictureinpicture：可暂停主页面其他媒体、隐藏原生控件、记录当前轨道索引
• 监听 leavepictureinpicture：恢复 UI、检查是否需重置音轨/字幕显示逻辑
• 主动退出用 document.exitPictureInPicture()，返回 Promise，失败时可能因无活跃 PiP 或跨域限制
• 可用 document.pictureInPictureElement 判断当前是否有 PiP 实例（非 null 表示正在 PiP 中）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！