如何使用 JavaScript 或 jQuery 获取所有视频元素答案

【问题标题】：How to get all video elements with JavaScript or jQuery如何使用 JavaScript 或 jQuery 获取所有视频元素
【发布时间】：2017-11-28 23:26:12
【问题描述】：

我的网站在一个页面上有多个视频。视频数量因用户而异。我希望在用户访问页面时自动播放所有视频。这在桌面和 iOS 浏览器上是可行的。但是，许多 Android 浏览器需要自动播放的解决方法。查看我的代码：

<?php 
  for ($i=0; $i < $videos.length; $i++) { 
?>

  <video playsinline autoplay muted loop>
    <source class="img-responsive center-block col-md-7" src="<?php echo ${'videos' . $i} ?>" type="video/mp4">
      Your browser does not support the video tag.
  </video>

<?php
  }
?>


<script>
 var video = document.querySelector('video');

 window.addEventListener('touchstart', function videoStart() {
   video.play();
   console.log('first touch');
   // remove from the window and call the function we are removing
   this.removeEventListener('touchstart', videoStart);
 });
</script>

querySelector 和 querySelectorAll 我都试过了。 querySelector('video') 显然适用于选择第一个视频，但以下都不是。 querySelectorAll('video') 不选择任何视频。

除了querySelector，还有其他可行的方法吗？

【问题讨论】：

标签： javascript android jquery video autoplay

【解决方案1】：

你可以试试

var videoList = document.getElementsByTagName("video");

这将返回您页面中的所有视频标签

谢谢！

【讨论】：

【解决方案2】：

HTML5 视频“自动播放”属性应该适用于大多数浏览器。你可能想看看Video Browser Compatibility，自动播放在第二行。

要为页面上的所有视频启用自动播放，请查看以下代码：

<script>
  var videos = document.querySelectorAll('video'); // get all videos using "video" css selector
  /*Loop*/
 for(video of videos) { // use var video if "strict mode" is enabled
    video.addEventListener('loadstart', function() { // during the loading process
        video.autoplay = true;  // set autoplay proterty to true
      })
        video.load(); // now reload
   }
</script>

【讨论】：