如何使用JavaScript自动播放页面/文档上的所有视频元素(视频上没有类或ID)

如何使用javascript自动播放页面/文档上的所有视频元素（视频上没有class或id）

我能做/不能做的事：
1.我无法手动添加循环布尔值选项到视频元素的编码中。我试过了，它不会写。
1.但是我可以将脚本添加到正文中。
1.我试着把[0]去掉，但它不适用于任何视频元素
示例：https://jsbin.com/duhejihidi/edit?html,output
（第一个视频循环播放，第二个视频不循环播放）
我可以通过将循环应用于第一个视频元素来达到这一目的。但是我如何让这个脚本应用于页面/文档中出现的所有视频。任何帮助都将非常感谢。

var myVideo = document.getElementsByTagName('video')[0];
if (typeof myVideo.loop == 'boolean') { // loop supported
  myVideo.loop = true;
} else { // loop property not supported
  myVideo.addEventListener('ended', function () {
    this.currentTime = 0;
    this.play();
  }, false);
}
//...
myVideo.play();

你需要先获取video标签的HTMLCollection，然后创建一个循环来迭代所有的视频，以在HTML中应用自动播放：

var myVideo = document.getElementsByTagName('video');
for(let i = 0; i < myVideo.length; i++) {
  if (typeof myVideo[i].loop == 'boolean') { // loop supported
    myVideo[i].loop = true;
  } else { // loop property not supported
    myVideo[i].addEventListener('ended', function () {
      this.currentTime = 0;
      this.play();
    }, false);
  }
}

完整代码：

<!DOCTYPE html> 
<html> 
<body> 

<figure class="tmblr-full" data-orig-height="1920" data-orig-width="1080" data-npf="{&quot;type&quot;:&quot;video&quot;,&quot;provider&quot;:&quot;tumblr&quot;,&quot;url&quot;:&quot;https://va.media.tumblr.com/tumblr_rrry4de6F61zhj6kb_720.mp4&quot;,&quot;media&quot;:{&quot;url&quot;:&quot;https://va.media.tumblr.com/tumblr_rrry4de6F61zhj6kb_720.mp4&quot;,&quot;type&quot;:&quot;video/mp4&quot;,&quot;width&quot;:1080,&quot;height&quot;:1920},&quot;poster&quot;:[{&quot;url&quot;:&quot;https://64.media.tumblr.com/tumblr_rrry4de6F61zhj6kb_frame1.jpg&quot;,&quot;type&quot;:&quot;image/jpeg&quot;,&quot;width&quot;:1080,&quot;height&quot;:1920}],&quot;filmstrip&quot;:{&quot;url&quot;:&quot;https://64.media.tumblr.com/previews/tumblr_rrry4de6F61zhj6kb_filmstrip.jpg&quot;,&quot;type&quot;:&quot;image/jpeg&quot;,&quot;width&quot;:2000,&quot;height&quot;:357}}"><video controls="controls" autoplay="autoplay" muted="muted" poster="https://64.media.tumblr.com/tumblr_rrry4de6F61zhj6kb_frame1.jpg" class="mtz-cfejh"><source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4"></video></figure>

  <figure class="tmblr-full" data-orig-height="1920" data-orig-width="1080" data-npf="{&quot;type&quot;:&quot;video&quot;,&quot;provider&quot;:&quot;tumblr&quot;,&quot;url&quot;:&quot;https://va.media.tumblr.com/tumblr_rrp2u9YQ2W1zhj6kb_720.mp4&quot;,&quot;media&quot;:{&quot;url&quot;:&quot;https://va.media.tumblr.com/tumblr_rrp2u9YQ2W1zhj6kb_720.mp4&quot;,&quot;type&quot;:&quot;video/mp4&quot;,&quot;width&quot;:1080,&quot;height&quot;:1920},&quot;poster&quot;:[{&quot;media_key&quot;:&quot;8e98f738415b076627bad8f17942ae65:bceceaf96e8596b4-22&quot;,&quot;type&quot;:&quot;image/jpeg&quot;,&quot;width&quot;:456,&quot;height&quot;:810,&quot;url&quot;:&quot;https://64.media.tumblr.com/8e98f738415b076627bad8f17942ae65/bceceaf96e8596b4-22/s540x810/c5206f85580dfdf768fe67d880bb7a83207194e7.jpg&quot;}]}"><video controls="controls" autoplay="autoplay" muted="muted" poster="https://64.media.tumblr.com/8e98f738415b076627bad8f17942ae65/bceceaf96e8596b4-22/s540x810/c5206f85580dfdf768fe67d880bb7a83207194e7.jpg" class="mtz-cfejh"><source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4"></video></figure>
  
 

<p id="demo"></p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
var myVideo = document.getElementsByTagName('video');
for(let i = 0; i < myVideo.length; i++) {
  if (typeof myVideo[i].loop == 'boolean') { // loop supported
    myVideo[i].loop = true;
  } else { // loop property not supported
    myVideo[i].addEventListener('ended', function () {
      this.currentTime = 0;
      this.play();
    }, false);
  }
}
//...
//myVideo.play();

</script>

</body> 
</html>

如何使用JavaScript自动播放页面/文档上的所有视频元素(视频上没有类或ID)

1条答案

相关问题

热门标签

最新问答