使用Video.js播放多音轨视频时音频切换功能失效求助

问题详情 #

使用Video.js开发视频播放器时，导入双音轨视频后无法识别多音轨，始终仅能获取到轨道0，点击“Change Audio Track”按钮无法切换音频轨道。

原代码 #

JavaScript部分

const player = videojs('something');

function changeAudio() {
  console.log(player, "all")
  const audioTracks = player.audioTracks();
  console.log(audioTracks, "audioTracks")

  if (audioTracks.length > 1) {
    const currentTrackIndex = player.audioTracks().selectedIndex;
    const nextTrackIndex = (currentTrackIndex + 1) % audioTracks.length;

    audioTracks[nextTrackIndex].enabled = true;
    audioTracks[currentTrackIndex].enabled = false;
  }
}

HTML部分

<head>
  <meta charset="utf-8">
  <title>Test2023</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.15.4/video.js"></script>
</head>

<body>
  <app-root></app-root>
  
  <video id="something" class="video-js vjs-default-skin" width="320" height="240" controls>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>
  <button onclick="changeAudio()">Change Audio Track</button>
</body>

解决步骤 #

1. 替换为真正的双音轨视频 #

当前示例中的BigBuckBunny.mp4是单音轨视频，这是无法识别多音轨的核心原因。请替换为包含多音轨的MP4文件（需确保音轨编码为浏览器支持的格式，如AAC）。

2. 修正音轨切换逻辑 #

Video.js的audioTracks API中，切换音轨需设置selected属性（而非enabled），且selectedIndex为只读属性，无法直接用于计算。修正后的代码如下：

const player = videojs('something');

function changeAudio() {
  const audioTracks = player.audioTracks();
  
  if (audioTracks.length > 1) {
    // 定位当前选中的音轨
    let currentTrack;
    for (let i = 0; i < audioTracks.length; i++) {
      if (audioTracks[i].selected) {
        currentTrack = audioTracks[i];
        break;
      }
    }
    
    // 计算下一个音轨索引
    const currentIndex = Array.from(audioTracks).indexOf(currentTrack);
    const nextIndex = (currentIndex + 1) % audioTracks.length;
    
    // 切换音轨选中状态
    currentTrack.selected = false;
    audioTracks[nextIndex].selected = true;
  }
}

3. 监听音轨加载事件 #

添加loadedmetadata事件监听，确保音轨已完全加载后再进行操作：

player.on('loadedmetadata', () => {
  console.log('已加载音轨数量:', player.audioTracks().length);
});

4. 确认Video.js版本兼容性 #

你使用的7.15.4版本完全支持多音轨功能，若仍有问题，可尝试升级到最新稳定版。

内容的提问来源于stack exchange，提问作者mohammad sarvar