如何检查多个 HTML5 视频的音频

Posted 2023-02-25

【中文标题】如何检查多个 HTML5 视频的音频

【英文标题】：How to check multiple HTML5 videos for audio

【发布时间】：2017-08-01 08:53:02

【问题描述】：

我正在尝试检查多个视频是否有音频，如下所示： https://jsfiddle.net/hrd4a0c3/

但这只检查一个视频，我希望它检查多个视频。

document.getElementById("myVideo").addEventListener("loadeddata", function() 
  if (typeof this.webkitAudioDecodedByteCount || this.mozHasAudio || this.audioTracks !== "undefined") 
    if (this.webkitAudioDecodedByteCount > 0 || this.mozHasAudio || this.audioTracks && this.audioTracks.length)
      this.after("has audio");
    else
      this.after("no audio");
  
);

【参考方案1】：

我会使用class 而不是id，因为id 应该是指一个元素。

<video class='myVideo' autoplay loop muted>
  <source src="https://vtt.tumblr.com/tumblr_ok41s7Iebh1t4fjz0_480.mp4" type="video/mp4">
</video>

<video class='myVideo' autoplay loop muted>
  <source src="https://vtt.tumblr.com/tumblr_ok44bpZZka1t4fjz0_480.mp4" type="video/mp4">
</video>

然后你可以像这样使用getElementsByClassName：

var videos = document.getElementsByClassName("myVideo");

for (i = 0; i < videos.length; i++) 
  videos[i].addEventListener("loadeddata", function() 
    if (typeof this.webkitAudioDecodedByteCount || this.mozHasAudio || this.audioTracks !== "undefined") 
      if (this.webkitAudioDecodedByteCount > 0 || this.mozHasAudio || this.audioTracks && this.audioTracks.length)
        this.after("has audio");
      else
        this.after("no audio");
    
  );

更新Fiddle

【讨论】：

没问题 :) 我很高兴它有帮助。

请再次帮助我，我不能在这个“.after”中添加一些 html 或 css 不起作用

要插入 html 字符串作为 ("<p>no audio</p>") 之类的内容，您可以使用 JQuery - Fiddle Demo - 请注意在 fiddle 中如何将 JQuery 添加到左侧栏的外部资源中。

是的，只是 $(this)，对不起，我的错。我没有大脑