HTML5视频，如何检测没有音轨？

Posted 2023-02-25

【中文标题】HTML5视频，如何检测没有音轨？

【英文标题】：HTML5 video, how to detect when there is no audio track?

【发布时间】：2014-01-21 22:06:04

【问题描述】：

我正在制作一个 chrome 应用程序，我想为视频播放设置自定义控件，但我在使用静音按钮时遇到了一些困难。大多数将在应用程序中播放的视频都是无声的，所以我希望能够在没有音轨时禁用按钮，就像 chrome 使用默认控件一样。

尝试使用音量值，但即使没有音轨，它也会返回“1”。检查视频是否静音也不起作用。

这是snippet。

有什么建议吗？

【问题讨论】：

我认为目前不可能。另外，有几个视频有音轨，但一直保持沉默。

永不言败：您可以将视频的音频输入到 webAudio API 操作中以验证非静音。只能在 chrome 和 FF 中工作，我不知道该怎么做，但可以做到......

@dandavis：这应该在Chrome, FF and Safari 中工作。

我倒霉。 @dandavis 我会调查一下，谢谢。

【参考方案1】：

基于upuoth的答案的更短的功能并扩展为支持IE10+

function hasAudio (video) 
    return video.mozHasAudio ||
    Boolean(video.webkitAudioDecodedByteCount) ||
    Boolean(video.audioTracks && video.audioTracks.length);

用法：

var video = document.querySelector('video');
if(hasAudio(video)) 
    console.log("video has audio");
 else
    console.log("video doesn't have audio");

【讨论】：

大家不要忘记视频元素上的addEventListener("loadeddata")。

我在我的视频元素上为loadeddata 和loadedmetadata 记录了hasAudio(video) 内部事件侦听器，在我的情况下，loadedmetadata 记录了false 而loadeddata 记录了true.

【参考方案2】：

在某些时候，浏览器可能会开始实现audioTracks property。目前，您可以在 webkit 中使用 webkitAudioDecodedByteCount，在 firefox 中使用 mozHasAudio。

document.getElementById("video").addEventListener("loadeddata", function() 
  if (typeof this.webkitAudioDecodedByteCount !== "undefined") 
    // non-zero if video has audio track
    if (this.webkitAudioDecodedByteCount > 0)
      console.log("video has audio");
    else
      console.log("video doesn't have audio");
  
  else if (typeof this.mozHasAudio !== "undefined") 
    // true if video has audio track
    if (this.mozHasAudio)
      console.log("video has audio");
    else
      console.log("video doesn't have audio");
  
  else
    console.log("can't tell if video has audio");
);

【讨论】：

音频总是返回0，你知道如何检查音频是否有声音吗？

信息： 2022。-仍未实施。

【参考方案3】：

由于某种原因，@fregante's hasAudio function 在某个时候停止了在 Chrome 中的工作——即使在等待“loadeddata”和“loadedmetadata”事件，甚至是“canplaythrough”事件之后。它可能与我使用的视频格式（webm）有关。无论如何，我通过短时间播放视频解决了这个问题：

// after waiting for the "canplaythrough" event:
hasAudio(video); // false
video.play();
await new Promise(r => setTimeout(r, 1000));
video.pause();
hasAudio(video); // true