HTML视频怎么添加多个音轨选项_HTML视频标签多音轨支持

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML视频怎么添加多个音轨选项_HTML视频标签多音轨支持

2025-10-07

浏览次数：次

返回列表

HTML5视频标签不原生支持多音轨切换，需通过HLS/DASH流媒体协议结合J*aScript实现。使用hls.js或Shaka Player等库，可在.m3u8或MPD文件中定义多音轨，并通过JS控制音轨选择，实现语言切换功能。

html视频怎么添加多个音轨选项_html视频标签多音轨支持

HTML5的<video></video>标签本身不直接支持在视频文件中嵌入多个可切换的音轨并原生显示选择菜单，但通过使用WebVTT音轨和J*aScript可以实现多音轨切换功能。要让网页视频支持多个音轨选项，需要结合符合标准的媒体格式（如MPEG-DASH或HLS）与J*aScript控制逻辑。

使用MSE + DASH/HLS 实现多音轨支持

现代浏览器支持通过Media Source Extensions (MSE) 播放基于流的视频格式，比如DASH（Dynamic Adaptive Streaming over HTTP）或HLS（HTTP Live Streaming）。这些格式允许在一个视频流中包含多个音轨（例如不同语言配音），并通过播放器进行切换。

推荐使用开源播放器库来简化开发：

Video.js + videojs-contrib-dash：支持DASH流，可自动识别多音轨。
Hls.js：支持HLS流，在支持的.m3u8文件中读取多个AUDIO组。
Shaka Player：Google推出的开源播放器，原生支持DASH和多音轨切换。

示例：HLS 多音轨（m3u8）配置

在HLS的.m3u8播放列表中，可以通过定义多个AUDIO属性来添加音轨：

#EXTM3U
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio-aac",NAME="Chinese",DEFAULT=YES,AUTOSELECT=YES,URI="chinese.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio-aac",NAME="English",DEFAULT=NO,AUTOSELECT=YES,URI="english.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=1000000,AUDIO="audio-aac"
index.m3u8

然后使用hls.js加载该播放列表，浏览器会自动检测可用音轨：

UXbot

AI产品设计工具

185 查看详情 UXbot

<video id="video&quot; controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  const video = document.getElementById('video');
  const hls = new Hls();
  hls.loadSource('playlist.m3u8');
  hls.attachMedia(video);

  // 监听音轨变化
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    const audioTracks = hls.audioTracks;
    for (let i = 0; i < audioTracks.length; i++) {
      const option = document.createElement('option');
      option.value = i;
      option.innerText = audioTracks[i].name;
      audioSelector.appendChild(option);
    }
  });

  const audioSelector = document.createElement('select');
  audioSelector.onchange = function() {
    hls.audioTrack = this.value;
  };
  document.body.appendChild(audioSelector);
</script>