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

Question

我正在为网页上的 MP4 视频创建自定义 Controller 。 Controller 包括音量 slider 。部分要播放的视频没有音轨。最好为这些视频禁用音量 slider ，这样用户在更改音量 slider 的位置时不会感到困惑。

是否有检查 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
}

video.webkitAudioDecodedByteCount 值最初为 0。在我的测试中，填充非零值可能需要长达 256 毫秒，因此我包含了一个超时以继续检查(一段时间)。

Answer 1

可能有更好的方法来做到这一点，尽管它相当简单，只需为 webkit 或 mozilla 启用的浏览器使用常规 javascript 即可。 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，但是，我从来没有运气让它起作用。}