HTML5视频,如何检测没有音轨?

Posted

技术标签:

【中文标题】HTML5视频,如何检测没有音轨?【英文标题】:HTML5 video, how to detect when there is no audio track? 【发布时间】:2014-01-21 22:06:04 【问题描述】:

我正在制作一个 chrome 应用程序,我想为视频播放设置自定义控件,但我在使用静音按钮时遇到了一些困难。大多数将在应用程序中播放的视频都是无声的,所以我希望能够在没有音轨时禁用按钮,就像 chrome 使用默认控件一样。

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

这是snippet。

有什么建议吗?

【问题讨论】:

我认为目前不可能。另外,有几个视频有音轨,但一直保持沉默。 永不言败:您可以将视频的音频输入到 webAudio API 操作中以验证非静音。只能在 chrome 和 FF 中工作,我不知道该怎么做,但可以做到...... @dandavis:这应该可以在Chrome, FF and Safari 中使用。 我倒霉。 @dandavis 我会调查一下,谢谢。 【参考方案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");

【讨论】:

大家不要忘记视频元素上的addEventListener("loadeddata") 我在我的视频元素上为loadeddataloadedmetadata 记录了hasAudio(video) 内部事件侦听器,在我的情况下,loadedmetadata 记录了falseloadeddata 记录了true.【参考方案2】:

在某些时候,浏览器可能会开始实现audioTracks property。目前,您可以在 webkit 中使用 webkitAudioDecodedByteCount,在 firefox 中使用 mozHasAudio

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

【讨论】:

音频总是返回0,你知道如何检查音频是否有声音吗? 信息: 2022。-仍未实施。【参考方案3】:

由于某种原因,@fregante's hasAudio function 在某个时候停止了在 Chrome 中的工作——即使在等待“loadeddata”和“loadedmetadata”事件,甚至是“canplaythrough”事件之后。它可能与我使用的视频格式(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视频,如何检测没有音轨?的主要内容,如果未能解决你的问题,请参考以下文章

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

检测纵横比 - HTML5 视频

如何检测 HTML5 视频标签支持的视频格式?

HTML5视频标签,javascript检测播放状态?

使用 HTML5 视频检测帧精确搜索

使用 iphone 上的 HTML5 视频元素,如何检测“暂停”和“完成”之间的区别?