title: How to automatically play videos on scroll using javascript?
body: <p>Since 4 Days I am trying to autoplay my videos on the scroll. I have created an application where people can see a list of videos in vertical order. I want to automatically play the video that is currently on the screen and pause other videos.</p>
  
  <p><a href="https://i.stack.imgur.com/abyHL.png" rel="nofollow noreferrer">Video Player Image</a> .
  <a href="https://i.stack.imgur.com/eGCpl.png" rel="nofollow noreferrer">Videos on scroll</a></p>
  
  <p>I have implemented the HTML5 Video player using Plyr.io. Currently, the below code helps to pause other videos while playing current video. But video not playing automatically on the scroll.
  I am sharing the code here. Please do help. Thanks in advance.</p>
  
  <pre><code>                   &lt;?
  
          $sql_queryvid = "SELECT * FROM videos WHERE visible !='locked' ORDER BY video_no ASC";
          $result2vid = mysql_query ($sql_queryvid) or die (mysql_error ());
          ?&gt;
           &lt;?php
        while ($row2vid = mysql_fetch_array ($result2vid))
            {
            ?&gt;
             &lt;div class="swiper-slide"&gt;
  &lt;video class="playerembed" poster="&lt;?php echo $row2vid['thumbnail'];?&gt;" id="player" playsinline autoplay loop controls style="object-fit: cover;"&gt;
      &lt;source src="&lt;?php echo $row2vid['videosrc'];?&gt;" type="video/mp4" /&gt;
      &lt;source src="/path/to/video.webm" type="video/webm" /&gt;
  
  
  &lt;/video&gt;
  
      &lt;/div&gt;
  
  &lt;? } ?&gt;
  
  
        &lt;script src="https://cdn.plyr.io/3.5.6/plyr.js"&gt;&lt;/script&gt;
          &lt;script&gt;
      const controls = [
                  'play-large', // The large play button in the center
  
                  'rewind', // Rewind by the seek time (default 10 seconds)
                  'play', // Play/pause playback
                  'fast-forward', // Fast forward by the seek time (default 10 seconds)
                  'progress', // The progress bar and scrubber for playback and buffering
                  'current-time', // The current time of playback
                  'duration', // The full duration of the media
                  'captions', // Toggle captions
                  'settings', // Settings menu
                  'pip' // Picture-in-picture (currently Safari only)
              ];
          const players = Array.from(document.querySelectorAll('.playerembed')).map(player =&gt; new Plyr(player, { controls }));
  
  
       players.forEach(function(instance,index) {
                  instance.on('play',function(){
                      players.forEach(function(instance1,index1){
                          if(instance != instance1){
                              instance1.pause();
                          }
                      });
                  });
              });
      &lt;/script&gt;
  </code></pre>