使用JavaScript检测MP4视频是否有音轨

Question

我正在为网页上的MP4视频创建自定义控制器。该控制器包括一个音量滑块。其中一些要播放的视频没有声音轨道。最好禁用这些视频的音量滑块，以免用户在更改音量滑块位置时感到困惑，因为没有任何效果。是否有属性或技巧可以检查MP4文件是否具有音频轨道？（jQuery是一种选择）。

编辑：使用@dandavis的建议，我现在对Chrome（和Opera上的.ogg）有了这个解决方案：

var video = document.getElementById("video")
var volume = document.getElementById("volume-slider")

function initializeVolume() {
  var enableVolume = true
  var delay = 1

  if (video.webkitAudioDecodedByteCount !== undefined) {
    // On Chrome, we can check if there is audio. Disable the volume
    // control by default, and reenable it as soon as a non-zero value
    // for webkitAudioDecodedByteCount is detected.
    enableVolume = false

    startTimeout()

    function startTimeout () {
      if (!!video.webkitAudioDecodedByteCount) {
        enableVolume = true
        toggleVolumeEnabled(enableVolume)
      } else {
        // Keep trying for 2 seconds
        if (delay < 2048) {
          setTimeout(startTimeout, delay)
          delay = delay * 2
        }
      }
    }
  }

  toggleVolumeEnabled(enableVolume)
}


function toggleVolumeEnabled(enableVolume) {
  volume.disabled = !enableVolume
}

视频的webkitAudioDecodedByteCount值最初为0。在我的测试中，可能需要最多256毫秒才能填充非零值，因此我已包括超时以继续检查（一段时间）。

- James Newton

---

那要看情况，使用Web Audio API的解决方案是否可行，这只在较新的浏览器中支持，在IE中则完全不支持，据我所知。 - adeneo

在支持它的浏览器中（不包括IE），您可以将视频用作Web Audio API的源，并使用OfflineAudioContext检查声音。我对API的细节了解不够，无法提供解决方案。 - apsillers

Web Audio API听起来像是许多用户的解决方案，没错。 - James Newton

在某个浏览器中，!!video.webkitAudioDecodedByteCount 表示音频解码的字节数。 - dandavis

这个回答解决了你的问题吗？HTML5视频，如何检测是否存在音轨？ - idmean

Answer 1

可能有更好的方法来完成这个任务，虽然使用常规的javascript对于支持webkit或mozilla的浏览器来说非常简单。其中webkit使用this.audioTracks，而mozilla则使用this.mozHasAudio：

document.getElementById("video").addEventListener("loadeddata", function() {
  if ('WebkitAppearance' in document.documentElement.style)
    var hasAudioTrack = this.audioTracks.length;
  else if (this.mozHasAudio)
    var hasAudioTrack = 1;
  if (hasAudioTrack > 0)
    alert("audio track detected");
  else
    alert("audio track not detected");
});

<video id="video" width="320" height="240" controls>
  <source src="http://media.w3.org/2010/05/video/movie_300.mp4" type="video/mp4">
</video>

_{还有一个函数this.webkitAudioDecodedByteCount，但是我从来没有成功过。}

- l'L'l

---

使用这段代码时，我只得到了“无法读取未定义的属性'length'”。 - ZomoXYZ

@Jaketr00：我刚试了一下这段代码，似乎可以正常工作（检测到音频）：https://jsfiddle.net/ac93zje5/ ... 可能有帮助的是知道你使用的是哪个浏览器。 - l'L'l

我正在Mac OSX 10.11上运行Chrome v50.0.2661.94，即使使用你的jsfiddle，我仍然会得到相同的错误。 - ZomoXYZ

@Jaketr00：我已经尝试了Firefox，所以可能目前与Chrome不兼容；感谢提醒。 - l'L'l

Answer 2

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

- princep