tv浏览器video标签不显示字幕的主因是底层引擎未启用字幕渲染管线；需手动js解析vtt并dom渲染，注意性能优化、mime类型、同源策略及平台私有api限制。
TV 浏览器 video 标签不显示 <track></track> 字幕的常见原因
绝大多数 TV 浏览器（如 WebOS、Tizen、Android TV 内置浏览器）对 HTML5 字幕支持极弱，<track kind="subtitles"></track> 基本被忽略——不是你写错了，是底层 WebKit 或 Blink 移动/嵌入式分支压根没启用字幕渲染管线，或禁用了 TextTrack 的 UI 合成逻辑。
典型表现：video.textTracks.length 可能返回 1，但 track.mode = 'showing' 无效；控制台无报错，字幕区域就是空白。
- WebOS 4.x–6.x：默认禁用字幕渲染，需手动调用私有 API
webOS.showSubtitles(true)（仅限 LG 官方应用上下文） - Tizen 5.5+：需在
config.xml中显式声明<feature name="http://tizen.org/feature/subtitle"></feature>，否则<track></track>被静默丢弃 - Android TV Chrome：v90+ 才开始实验性支持，且依赖
crossorigin和 MIME 类型严格匹配（text/vtt），否则触发 CORS 静默失败
用 JavaScript 手动渲染 WebVTT 字幕到 canvas/div
绕过原生 <track></track> 的唯一可靠路径：自己解析 VTT、监听 timeupdate、计算当前活跃 cue、插入 DOM。
关键点不是“怎么画”，而是“怎么准”：TV 设备性能低、JS 引擎老旧（如 JSCore 旧版），避免高频重排、不用 requestAnimationFrame 做字幕同步（延迟大），改用 video.currentTime 查表比对。
立即学习“前端免费学习笔记（深入）”；
- 用
fetch()加载 VTT 后，用正则或轻量 parser（如vtt.js的VTT.Parser）提取 cue 列表，缓存为Array - 监听
video.addEventListener('timeupdate', ...)，每次取currentTime，二分查找当前生效的 cue（别用filter()） - 字幕容器必须是绝对定位的
<div id="subtitle-overlay">，CSS 禁用 <code>transform和opacity动画（TV GPU 不兼容） - 字体强制用系统级无衬线体：
font-family: 'Noto Sans', 'Droid Sans', sans-serif;，字号不低于28px（4K 屏需按 DPR 缩放）
const cues = parseVTT(vttText); // 假设已解析
const overlay = document.getElementById('subtitle-overlay');
video.addEventListener('timeupdate', () => {
const t = video.currentTime;
const active = cues.find(c => t >= c.start && t < c.end);
overlay.textContent = active ? active.text : '';
});
兼容 Tizen / WebOS 的字幕启用开关
部分 TV 平台提供私有接口强制开启字幕通道，但仅在特定上下文有效（如 Tizen Package、webOS App 容器），普通网页直连无效。
- Tizen：需在
config.xml添加<feature name="http://tizen.org/feature/subtitle" required="true"></feature>，再调用tizen.tvinputdevice.registerKey('Subtitle', ...)绑定快捷键 - WebOS：仅限
luna://com.webos.service.tv.display/setSubTitle（需系统权限），网页 JS 无法直接调用；替代方案是注入webkitVideoPresentationMode = 'picture-in-picture'触发底层字幕层唤醒（不稳定） - 通用降级：检测
video.textTracks.length === 0 || !video.textTracks[0].mode时，自动 fallback 到 JS 渲染路径
WebVTT 文件部署与 MIME 类型陷阱
TV 浏览器对字幕文件加载比 PC 更敏感，一个配置错误就导致 <track></track> 标签被忽略，且不报任何网络或解析错误。
- 服务器必须返回
Content-Type: text/vtt，Nginx 示例：location ~ \.vtt$ { add_header Content-Type text/vtt; } -
<track></track>的src必须同域或带crossorigin="anonymous"，否则 Tizen/WebOS 直接跳过加载 - VTT 文件首行必须是
WEBVTT（全大写，无 BOM），时间戳格式严格为HH:MM:SS.mmm，不能用00:01:23.45（少一位毫秒会解析失败） - 避免 UTF-8 BOM：某些 TV 解析器遇到 BOM 会整个文件读空
最易被忽略的是：TV 浏览器缓存策略激进，修改 VTT 后常需硬刷新（长按遥控器返回键 + 重启应用），单纯 Ctrl+F5 无效。
