竖屏视频加字幕不能只靠标签，因为手机直出MP4常不封装WebVTT轨道，导致静默失效；推荐用+叠加层手动渲染，通过timeupdate同步、绝对定位覆盖、vh单位适配竖屏，并注意iOS Safari拖动时的seeked事件与二分查找优化。
竖屏视频加字幕为什么不能只靠 <track></track> 标签？
因为浏览器对 <track></track> 的支持依赖于视频容器格式和编码方式，而大量竖屏视频（尤其是手机直出的 MP4）常使用不带 WebVTT 元数据轨道的封装方式，导致 <track kind="subtitles"></track> 直接失效——不是你写错了，是视频文件本身没嵌入可被解析的字幕流。
推荐方案：用 <video></video> + <div> 叠加层手动渲染字幕
<p>这是目前兼容性最好、可控性最强的方式，尤其适合竖屏（9:16）场景下精准控制字幕位置与样式。关键点在于同步、定位、响应式适配：</p>
<ul>
<li>用 <code>video.addEventListener('timeupdate') 拿当前播放时间，查字幕数组中匹配的时间段
<div class="subtitle"> 覆盖在 <code><video></video> 上，父容器设为 position: relative
padding-bottom: env(safe-area-inset-bottom) 留白，字幕 bottom 值建议设为 12vh 而非固定像素vw 或 vh（如 font-size: 4.2vh），确保在不同竖屏设备上可读
WebVTT 文件能用，但必须满足三个硬条件
如果你坚持用原生 <track></track>，得确认以下三点全部成立，否则字幕不会显示：
- 视频文件本身需包含
kind="subtitles"的轨道（可用ffprobe -v quiet -show_entries stream_tags=language -of csv video.mp4查） -
<track></track>的src必须是同源或带 CORS 头的.vtt文件（不能是本地 file:// 协议） -
<video></video>必须有crossorigin="anonymous"属性，否则即使 VTT 可访问，浏览器也会因跨域策略静默丢弃字幕
常见错误现象：Failed to load resource: the server responded with a status of 404 ()（路径错）、Text track failed to load（CORS 缺失）、字幕完全不出现（视频无轨道或 default 属性漏写）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
竖屏字幕的隐藏复杂点：时间轴精度与回退行为
手机浏览器（尤其是 iOS Safari）在拖动进度条后，timeupdate 可能延迟触发或跳过中间帧，导致字幕闪动或滞后。解决方案不是增加轮询频率，而是：
- 用
video.seeking事件监听拖动开始，在seeked触发后再更新字幕，避免中间状态干扰 - 字幕数组按起始时间升序排列，查找时用二分法（而非
find()遍历），降低高密度字幕下的计算开销 - 不要依赖
video.duration做百分比换算——竖屏视频常含黑边或软编码时间戳偏移，应以实际解码帧时间为基准
真正麻烦的从来不是“怎么加”，而是“加完之后在各种竖屏设备上是否始终对得准、看得清、不切边”。这点，连 YouTube 的内嵌字幕在部分安卓 WebView 里都会偏移几像素。
