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

Posted 2023-02-19

【中文标题】使用 javascript 检测 MP4 视频是不是有音轨

【英文标题】：Use javascript to detect if an MP4 video has a sound track使用 javascript 检测 MP4 视频是否有音轨

【发布时间】：2015-08-16 18:05:57

【问题描述】：

我正在为网页上的 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

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

【问题讨论】：

这取决于，使用 Web Audio API 的解决方案是否有效，据我所知，该解决方案仅在较新的浏览器中受支持，在 IE 中根本不支持。

在支持它的浏览器（不是 IE）中，您可以将视频用作Web Audio API 的源并使用OfflineAudioContext 检查声音。不过，我对 API 的细节了解不多，无法制定解决方案。

Web Audio API 听起来是许多用户的解决方案，是的。

!!video.webkitAudioDecodedByteCount 对于一个浏览器...

【参考方案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"   controls>
  <source src="http://media.w3.org/2010/05/video/movie_300.mp4" type="video/mp4">
</video>

_{还有一个函数this.webkitAudioDecodedByteCount，但是，我从来没有让它工作过。}

【讨论】：

使用此代码时，我只是得到“无法读取未定义的属性'长度'”。

@Jaketr00：我刚刚尝试了代码，它似乎工作正常（检测到音频）：jsfiddle.net/ac93zje5 ...了解您尝试使用的浏览器可能会有所帮助。

我在 Mac OSX 10.11 上运行 Chrome v50.0.2661.94，即使使用你的 jsfiddle，我仍然会遇到同样的错误。

@Jaketr00：我用 Firefox 试过，所以它可能与 Chrome 的 atm 不兼容；感谢您的提醒。