track标签在PiP模式下不显示字幕是浏览器设计所致，Chrome/Edge/Safari均强制禁用textTracks；桌面端需用document.pictureInPictureWindow注入自定义字幕层，iOS则依赖系统级字幕设置。
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> </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，且仅适用于桌面端。
立即学习“前端免费学习笔记（深入）”；
关键步骤：
- 确保视频已进入 PiP（监听
enterpictureinpicture） - 获取
document.pictureInPictureWindow（注意：不是window，是独立 window 对象） - 创建字幕
<div>，用 <code>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 字幕。没有银弹，只有条件分支。
