track元素不支持多声道字幕,仅支持多语言字幕或文本轨道;需用多个kind="subtitles"的track元素实现中/英/日等语言切换,且必须满足位置、属性、VTT格式、MIME类型及无BOM等四项硬性条件。

track 元素不支持多声道字幕——它根本不是为音频通道设计的,而是为文本轨道(如字幕、章节、描述)服务的。所谓“多声道字幕”是概念混淆,你真正需要的是「多语言字幕」或「多类型文本轨道」。
为什么track不能设多声道
HTML 规范中 track 的 kind 属性只接受固定枚举值:"subtitles"、"captions"、"descriptions"、"chapters"、"metadata"。它没有 "audio" 或 "channel" 这类选项,浏览器也不会把 track 当作音轨解析。
- 音频多声道(如 stereo、5.1、Dolby Atmos)由
<source></source>提供的媒体文件本身决定,前端无法用track切换声道 - 想让用户切换语言,用多个
track kind="subtitles";想切配音音轨,得用多个<source></source>+ JS 控制audio.src或video.src - 误写
kind="audio"或kind="stereo"→ 浏览器直接忽略该track,video.textTracks.length不变
track 怎么正确实现多语言字幕
多语言 ≠ 多声道,但常被混说。要让中/英/日字幕可选,必须同时满足四个硬性条件:
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
-
track必须是<video></video>的直接子元素,且严格位于所有<source></source>闭合之后、之前 - 每个
track必须带全四个属性:kind="subtitles"、srclang(如"zh-Hans")、label(如"中文(简体)")、src(指向 .vtt 文件) - .vtt 文件首行必须是顶格、全大写、无空格、无 BOM 的
WEBVTT,时间戳格式严格为00:00:01.234 --> 00:00:04.567 - 服务端返回
Content-Type: text/vtt;跨域需配Access-Control-Allow-Origin: *;本地开发禁用file://,必须起 HTTP 服务
如果真要切换不同配音音轨,该怎么做
这不是 track 的职责,得靠 <source></source> + JS 动态替换:
立即学习“前端免费学习笔记(深入)”;
- 准备多个音频/视频源:例如
movie-zh.mp4(中文配音)、movie-en.mp4(英文配音) - 用按钮触发 JS 修改
video.src,再调用video.load()和video.play() - 若需保持播放时间点一致,切换前读取
video.currentTime,赋值给新video实例后再play() - 注意:HLS/DASH 场景下,原生
track基本失效,得依赖 hls.js / dash.js 的audioTracksAPI
最易被忽略的一点:即使 HTML 结构和属性全对,只要 .vtt 文件保存时带了 BOM(比如 Windows 记事本默认),中文就会变方块,且 Chrome 完全静默失败——连 Network 面板都看不到请求发出。验证方式很简单:直接在浏览器地址栏打开 yourdomain.com/zh.vtt,看是否能干净显示纯文本。


















