HTML5视频，如何检测是否存在音轨？

Question

我正在制作一个Chrome应用程序，希望为视频播放添加自定义控件，但在静音按钮方面遇到了一些困难。应用程序中播放的大多数视频都是无声的，因此我希望能够像Chrome默认控件一样在没有音轨时禁用该按钮。尝试使用音量值，但即使没有音轨也返回“1”。检查视频是否已静音也不起作用。这里是片段。有什么建议吗？

- Louis P. Taylor

---

我认为目前这是不可能的。此外，有几个视频有音轨，但整个时间都保持沉默。 - Brad

永远不要说永远：您可以将视频的音频输入到WebAudio API操作中以验证非静音。仅适用于Chrome和可能的FF，我不知道如何做，但可以完成... - dandavis

@dandavis：这应该在Chrome，FF和Safari中运行。 - Moritz Mahringer

真倒霉。@dandavis 我会研究一下的，谢谢。 - Louis P. Taylor

Answer 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");
}

- fregante

---

各位不要忘记在视频元素上使用 addEventListener("loadeddata")。 - Morteza

我在视频元素的事件监听器中记录了 hasAudio(video)，包括 loadeddata 和 loadedmetadata 两个事件。在我的情况下，loadedmetadata 记录为 false，而 loadeddata 记录为 true。 - Joseph Webber

Answer 2

在某些时候，浏览器可能会开始实现audioTracks属性。目前，您可以在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");
});

- upuoth

---

这段代码总是返回音频的0值，你知道如何检查音频是否有声音吗？ - Israel Obanijesu

信息: 2022年了，但仍未实现。 - Roko C. Buljan

Answer 3

由于某些原因，@fregante的hasAudio函数在某个时刻停止在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

- joe

---

Chrome就是这样奇怪。它不允许某些事件在用户与页面交互之前生效，它不允许检查音频，除非视频已播放一段时间等等奇怪的行为。你可能会认为这会使它具备良好的隐私性能，但实际上却意味着正常操作需要绕过才能正常工作。 - JMVR

Answer 4

检查视频文件是否有音频的方法有很多种，其中之一是使用视频的 mozHasAudio、video.webkitAudioDecodedByteCount 和 video.audioTracks?.length 属性，简单明了...

const video = component.node.querySelector("video");
video.onloadeddata = function() {
    if ((typeof video.mozHasAudio !== "undefined" && video.mozHasAudio) ||
        (typeof video.webkitAudioDecodedByteCount !== "undefined" && video.webkitAudioDecodedByteCount > 0) ||
        Boolean(video.audioTracks?.length)) {
        console.log("This video has audio tracks.");
    } else {
        console.log("This video has no audio tracks.");
    }            
};

- princep