在ReactJS中如何检测视频源是否包含音频？

核心逻辑 #

• 等待视频元数据加载完成后检测音频轨存在状态
• 确认无音频轨时设置静音，同时监听音量变更事件锁定静音状态，避免用户手动取消
• 可配套UI提示告知用户当前视频无音频

原生HTML5 Video 实现代码 #

const video = document.querySelector('video');
let hasAudioTrack = false;

// 元数据加载完成后触发检测
video.addEventListener('loadedmetadata', () => {
  // 标准API判断优先
  if (video.audioTracks) {
    hasAudioTrack = Array.from(video.audioTracks).some(track => track.kind === 'audio' && track.enabled);
  } 
  // Firefox兼容
  else if ('mozHasAudio' in video) {
    hasAudioTrack = video.mozHasAudio;
  }
  // Webkit内核浏览器兜底判断
  else if ('webkitAudioDecodedByteCount' in video) {
    // 播放1秒后再判断，避免元数据加载不完整导致误判
    setTimeout(() => {
      hasAudioTrack = video.webkitAudioDecodedByteCount > 0;
      updateAudioStatus();
    }, 1000);
    return;
  }

  updateAudioStatus();
});

function updateAudioStatus() {
  if (!hasAudioTrack) {
    video.muted = true;
    // 锁定静音状态
    video.addEventListener('volumechange', enforceMute);
    // 此处可添加自定义UI提示逻辑，比如显示无音频图标
    // showNoAudioHint();
  } else {
    // 有音频时移除静音锁定
    video.removeEventListener('volumechange', enforceMute);
  }
}

function enforceMute() {
  if (!video.muted) {
    video.muted = true;
  }
}

Video.js 框架实现代码 #

如果使用Video.js框架，可直接调用封装好的API简化实现：

const player = videojs('your-player-id');

player.on('loadedmetadata', () => {
  const audioTracks = player.audioTracks();
  const hasAudio = audioTracks.length > 0 && Array.from(audioTracks).some(track => track.enabled);

  if (!hasAudio) {
    player.muted(true);
    // 锁定静音
    player.on('volumechange', () => {
      if (!player.muted()) {
        player.muted(true);
      }
    });
    // 添加无音频样式标记，可配合CSS显示自定义提示
    player.addClass('vjs-no-audio');
  }
});

注意：跨域视频源需要配置正确的CORS规则才能正常读取audioTracks属性，否则会返回空列表导致判断错误，请提前确认视频源的跨域配置符合要求。

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