HTML字幕标签画中画模式怎么显示？小窗播放适配教程-html教程-PHP中文网

track标签在PiP模式下不显示字幕是浏览器设计所致，Chrome/Edge/Safari均强制禁用textTracks；桌面端需用document.pictureInPictureWindow注入自定义字幕层，iOS则依赖系统级字幕设置。

html字幕标签画中画模式怎么显示？小窗播放适配教程

track 标签本身在画中画（PiP）模式下不会自动显示字幕，这不是 bug，而是浏览器的明确设计：PiP 窗口只渲染 video 元素的视频帧和音频轨道，track（包括 kind="subtitles" 或 kind="captions"）默认被忽略。

`track` 在 PiP 中不显示，是因为浏览器根本没加载它

PiP 窗口是独立渲染上下文，它不继承主页面的 DOM 结构、CSS 样式，也不解析或挂载 track 元素。即使你写了：

<video controls><source src="video.mp4"><track kind="subtitles" srclang="zh" label="中文" src="zh.vtt" default></track></source></video>

进入 PiP 后，字幕依然空白——document.pictureInPictureElement 返回的 video 实例里，textTracks 虽存在，但所有 mode 都是 "disabled"，且无法通过 JS 改为 "showing"。

Chrome / Edge：PiP 中 video.textTracks 的 mode 强制锁定为 "disabled"，调用 track.mode = "showing" 无效，无报错，静默失败
Safari（macOS/iOS）：行为一致，且不触发 texttrackchange 事件
Firefox：不支持 PiP，此问题不适用

想让小窗里看到字幕，只能靠「自定义字幕层」+ `document.pictureInPictureWindow`

Chrome 116+ 开始支持将任意 DOM 节点注入 PiP 窗口（需先调用 document.adoptNode()），这是目前唯一可靠方案。但注意：它不兼容 Safari 和旧版 Chrome，且仅适用于桌面端。

关键步骤：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

确保视频已进入 PiP（监听 enterpictureinpicture）
获取 document.pictureInPictureWindow（注意：不是 window，是独立 window 对象）
创建字幕 ，用 document.adoptNode() 移入 PiP 窗口
用 postMessage 同步主页面的字幕文本（VTT 解析需在主页面做）


示例精简逻辑：
video.addEventListener('enterpictureinpicture', () => {
  const pipWin = document.pictureInPictureWindow;
  const subtitleDiv = document.createElement('div');
  subtitleDiv.id = 'pip-subtitle';
  subtitleDiv.style.cssText = `
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: white; background: rgba(0,0,0,0.7); padding: 8px 12px;
    font-size: 14px; pointer-events: none;
  `;

  // 移入 PiP 窗口
  pipWin.document.body.appendChild(pipWin.document.adoptNode(subtitleDiv));

  // 主页面监听 timeupdate，发字幕文本过去
  video.addEventListener('timeupdate', () => {
    const cue = getCurrentCue(video.currentTime); // 你自己实现 VTT 时间轴匹配
    pipWin.postMessage({ type: 'subtitle', text: cue?.text || '' }, '*');
  });

  // PiP 窗口内监听消息（需提前注入脚本，或用动态 script 标签）
});

iOS Safari 完全不走这条路：它压根不支持 JS 触发 PiP，也无 document.pictureInPictureWindow

iOS 16.4+ 才开始提供 enterpictureinpicture 事件，但：


requestPictureInPicture() 始终抛 NotSupportedError  
字幕只能依赖系统级字幕（设置 → 辅助功能 → 字幕与隐藏式字幕），网页无法干预  
如果你加了 webkit-playsinline + playsinline，用户锁屏后上滑控制中心，点 PiP 图标——此时字幕是否显示，完全取决于系统设置和视频封装（如 MP4 是否内嵌 CEA-608/708）  

换句话说：在 iOS 上，别试图用 JS 控制 PiP 字幕；能做的只有确保 track 属性合法、VTT 文件可跨域访问、并提示用户去系统开启实时字幕。

真正难的不是写几行代码，而是接受一个事实：HTML 字幕和画中画是两条平行线，原生不交汇。所谓“适配”，本质是在不同平台用不同策略兜底——桌面靠 document.pictureInPictureWindow 注入 DOM，iOS 靠系统能力，Android WebView 则大概率直接不支持 PiP 字幕。没有银弹，只有条件分支。