How to automatically play videos on scroll using javascript?

Question

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.

Video Player Image . Videos on scroll

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.

                   <?

        $sql_queryvid = "SELECT * FROM videos WHERE visible !='locked' ORDER BY video_no ASC";
        $result2vid = mysql_query ($sql_queryvid) or die (mysql_error ());
        ?>
         <?php
      while ($row2vid = mysql_fetch_array ($result2vid))
          {
          ?>
           <div class="swiper-slide">
<video class="playerembed" poster="<?php echo $row2vid['thumbnail'];?>" id="player" playsinline autoplay loop controls style="object-fit: cover;">
    <source src="<?php echo $row2vid['videosrc'];?>" type="video/mp4" />
    <source src="/path/to/video.webm" type="video/webm" />


</video>

    </div>

<? } ?>


      <script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
        <script>
    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 => new Plyr(player, { controls }));


     players.forEach(function(instance,index) {
                instance.on('play',function(){
                    players.forEach(function(instance1,index1){
                        if(instance != instance1){
                            instance1.pause();
                        }
                    });
                });
            });
    </script>

score 0 · Answer 1 · answered Nov 28 '19 at 13:25

You can check the scrolling with jquery, and trigger play in the hight you want it :) and pause (you can restart or anything you want ....) when not

   let playAfterThisHeight = 200
    $(document).scroll(function() {
        if ($(document).scrollTop()> playAfterThisHeight) {
              $('.playerembed').trigger('play');

        } else {
          $('.playerembed').trigger('pause');
        }
    })

How to automatically play videos on scroll using javascript?

1 Answers1