竖屏视频加字幕不能只靠标签，因为手机直出MP4常不封装WebVTT轨道，导致静默失效；推荐用+叠加层手动渲染，通过timeupdate同步、绝对定位覆盖、vh单位适配竖屏，并注意iOS Safari拖动时的seeked事件与二分查找优化。

竖屏视频加字幕为什么不能只靠 标签？

因为浏览器对 的支持依赖于视频容器格式和编码方式，而大量竖屏视频（尤其是手机直出的 MP4）常使用不带 WebVTT 元数据轨道的封装方式，导致 直接失效——不是你写错了，是视频文件本身没嵌入可被解析的字幕流。

推荐方案：用 +

叠加层手动渲染字幕

这是目前兼容性最好、可控性最强的方式，尤其适合竖屏（9:16）场景下精准控制字幕位置与样式。关键点在于同步、定位、响应式适配：

• 用 video.addEventListener('timeupdate') 拿当前播放时间，查字幕数组中匹配的时间段
• 字幕文本用绝对定位的
  覆盖在 上，父容器设为 position: relative
• 竖屏下避免字幕被刘海/圆角遮挡：用 padding-bottom: env(safe-area-inset-bottom) 留白，字幕 bottom 值建议设为 12vh 而非固定像素
• 字体大小用 vw 或 vh（如 font-size: 4.2vh），确保在不同竖屏设备上可读

WebVTT 文件能用，但必须满足三个硬条件

如果你坚持用原生 ，得确认以下三点全部成立，否则字幕不会显示：

• 视频文件本身需包含 kind="subtitles" 的轨道（可用 ffprobe -v quiet -show_entries stream_tags=language -of csv video.mp4 查）
• 的 src 必须是同源或带 CORS 头的 .vtt 文件（不能是本地 file:// 协议）
• 必须有 crossorigin="anonymous" 属性，否则即使 VTT 可访问，浏览器也会因跨域策略静默丢弃字幕

常见错误现象：Failed to load resource: the server responded with a status of 404 ()（路径错）、Text track failed to load（CORS 缺失）、字幕完全不出现（视频无轨道或 default 属性漏写）。


DeepBI DHTML 页面生成器
生成可在 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 里都会偏移几像素。