使用 javascript 检测 MP4 视频是否有音轨 [英] Use javascript to detect if an MP4 video has a sound track

问题描述

我正在为网页上的 MP4 视频创建自定义控制器.控制器包括一个音量滑块.一些要播放的视频没有音轨.对于这些视频，最好禁用音量滑块，这样用户在更改音量滑块位置无效时不会感到困惑.

I am creating a custom controller for MP4 video on a web page. The controller includes a volume slider. Some of the videos that are to be played have no sound track. It would be good to disable the volume slider for these videos, so that the user is not confused when changing the position of the volume slider has no effect.

是否有用于检查 MP4 文件是否具有音轨的属性或技巧?(jQuery 是一个选项).

Is there a property or a trick for checking if an MP4 file has an audio track? (jQuery is an option).

使用@dandavis 的建议，我现在有了适用于 Chrome(以及 Opera 上的 .ogg)的解决方案:

using @dandavis's suggestion, I now have this solution for Chrome (and .ogg on Opera):

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 毫秒，因此我设置了超时以继续检查(一段时间).

The video.webkitAudioDecodedByteCount value is initially 0. In my tests, it may take up to 256ms to get populated with a non-zero value, so I have included a timeout to keep checking (for a while).

推荐答案

可能有更好的方法来做到这一点，尽管使用常规的 javascript for webkit 相当简单> 或 mozilla 启用的浏览器.webkit 使用 this.audioTracks 和 mozilla 分别使用 this.mozHasAudio :

There might be a better way of doing this, although it's fairly simple just using regular javascript for webkit or mozilla enabled browsers. webkit utilizes this.audioTracks and mozilla uses this.mozHasAudio respectively:

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，但是，我从来没有运气让它工作过.}

_{There's also a function this.webkitAudioDecodedByteCount, however, I've never had any luck making it work.}

这篇关于使用 javascript 检测 MP4 视频是否有音轨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！