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

Question

我有一个页面上有多个视频的网站。视频数量因用户而异。我希望所有视频在用户访问该页面时自动播放。这在桌面和 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可行的替代方案？

Answer 1

你可以试试

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

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

谢谢 ！