HTML5视频不原生支持多语言音频轨道切换，仅支持字幕和描述性音轨；实现多音轨需用MSE+多个SourceBuffer手动管理音频缓冲区，或借助Plyr等封装库，禁用无效的<track kind="audio">写法。
HTML5 视频本身不提供原生的多语言音频轨道切换接口——它只原生支持字幕（<track kind="subtitles">）和描述性音轨（descriptions），但不支持多个并存的、可切换的音频流轨道。要实现真正意义上的多语言音频切换（比如中/英/日语音轨自由切换），必须绕过原生 <audio> 或 <video> 的简单 src 切换，采用更底层的媒体处理方案。
原生方式仅限单音轨 + 手动 src 替换
最基础的做法是用 JavaScript 动态修改 <video> 的 src 属性，指向不同语言的完整音视频文件：
- 每个语言版本是一个独立的 MP4 文件（含对应音轨），如
movie-zh.mp4、movie-en.mp4 - 点击按钮时调用
video.pause()→video.src = 'xxx.mp4'→video.load()→video.play() - 缺点明显：需重新加载整个视频、有明显卡顿、无法共享视频画面、带宽浪费大
标准方案：MediaSource Extensions（MSE）+ 多 SourceBuffer
这是 Web 平台实现“同画面、多音轨”切换的工业级做法，适用于 HLS/DASH 封装或自定义 fMP4 分片场景：
- 创建
MediaSource实例并绑定到<video> - 为每条音频轨道单独调用
addSourceBuffer('audio/mp4; codecs="mp4a.40.2"')，得到多个SourceBuffer对象 - 视频轨道共用一个
SourceBuffer，各音频轨道各自独立缓冲 - 切换时暂停当前音频
SourceBuffer的追加，启用目标音频SourceBuffer，保持视频时间轴不变 - 关键约束：所有轨道的时间戳（
tfdt）必须对齐，否则音画不同步
实用替代：Plyr 等播放器封装层
若不想从零实现 MSE 逻辑，可借助成熟播放器库：
立即学习“前端免费学习笔记（深入）”；
-
Plyr 支持配置多音频轨道（通过
audioTracks选项），内部自动处理 MSE 或降级为 src 切换 - 它能读取浏览器语言偏好，自动匹配并加载对应音轨
- 提供统一 UI 控件（如「音轨」下拉菜单），开发者只需传入带
srclang和label的轨道信息 - 兼容 YouTube/Vimeo，也支持本地 MP4 + 外挂音频文件（需自行解析与同步）
注意事项与避坑点
无论采用哪种方式，以下细节直接影响可用性：
-
<track kind="audio"是无效写法 —— HTML5 不定义kind="audio"，该属性仅接受subtitles、captions、descriptions等 - 音频轨道切换不能靠
textTracksAPI，那是专为文本设计的 - 移动端 Safari 对 MSE 支持良好，但部分 Android WebView 仍限制多 SourceBuffer 并发
- 若用 fetch + Blob URL 方式加载音频片段，务必设置响应头
Content-Type: audio/mp4，否则 MSE 可能拒绝解析
