android - How to get all video elements with JavaScript or jQuery - Stack Overflow

admin管理员组

文章数量:1356853

I have a website that has multiple videos on a page. The number of videos varies by user. I would like all videos to autoplay when the user accesses the page. This is doable on desktop and iOS browsers. However, many Android browsers require a workaround for autoplay. See my code:

<?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>

I have tried both querySelector and querySelectorAll. querySelector('video') obviously works for selecting the 1st video, but none of the following. querySelectorAll('video') does not select any videos.

Are there any alternatives to querySelector that would work?

I have a website that has multiple videos on a page. The number of videos varies by user. I would like all videos to autoplay when the user accesses the page. This is doable on desktop and iOS browsers. However, many Android browsers require a workaround for autoplay. See my code:

<?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>

I have tried both querySelector and querySelectorAll. querySelector('video') obviously works for selecting the 1st video, but none of the following. querySelectorAll('video') does not select any videos.

Are there any alternatives to querySelector that would work?

• javascript
• android
• jquery
• video
• autoplay

Share Improve this question Follow edited Nov 29, 2017 at 17:06 user138172 asked Nov 28, 2017 at 23:26 user138172user138172 6111 gold badge22 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

you can try

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

this will return all the video tags from your page

Thanks !

HTML5 video "autoplay" property should work with most browsers. You might wanna look at Video Browser Compatibility, autoplay is on the second row.

To enable autoplay for all the videos on a page check out the code below:

<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>

本文标签： androidHow to get all video elements with JavaScript or jQueryStack Overflow