Question

我正在制作一个Chrome应用程序，我想为视频播放提供自定义控件，但我在使用静音按钮方面遇到了一些困难。大多数将在应用程序中播放的视频都是静音的，因此我希望能够在没有音频轨道的情况下禁用该按钮，就像Chrome使用默认控件一样。

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

有什么建议吗？

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

Answer 2

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

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

Answer 3

出于某种原因，@fregante's hasAudio function甚至在等待“ loadeddata”和“ loadedmetadata”事件，甚至是“ canplaythrough”事件后，都停止在Chrome中运行。这可能与我正在使用的视频格式（webm）有关。无论如何，我都是通过短时间播放视频来解决的：

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

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

3 个答案: