Search code examples
javascriptjqueryhtml5-videoviewport

After a lot of searching we have enabled autoplay with voice onscroll on our website but there is a problem

After searching a lot, we started autoplay with sound on our website but there is a problem that whenever the video comes inside the viewport, it starts automatically but when another video comes in the viewport, the above video should stop. Both videos play at the same time as long as both remain within the viewport.

This my code:

HTML:

<video 
id="video--<?php echo $wo['media']['storyId'];?>" 
class="plyrr-<?php echo $wo['media']['storyId'].$rand ; ?> <?php echo($wo['rvad_con']); ?> video-container" 
playsinline preload="metadata" 
poster="<?php  echo $wo['media']['video_thumb'];?>" 
data-setup="{}" data-post-video="<?php echo $wo['media']['storyId'];?>"
>

JavaScript (JQuery):

$(window).scroll(function(e)
{
    if (!document.pictureInPictureElement) 
    {
        $('.plyrr-<?php echo $wo['media']['storyId'].$rand ; ?>').each(function()
        {
            if ($(this).is(":in-viewport")) 
            { jQuery(this).get(0).play(); } 
            else 
            { $(this)[0].pause();  }
        });
    }
});

Problem:
It's not working like Instagram or Facebook where only one video plays at a time.

Is it possible to adjust Viewport size (or such) if the two videos are inside viewport at same time? How to stop the first video and play the second (latest video into viewport after scrolling up or down)?

Solution

  • After many research and change mathods finely I got this answer I have changed in my jQuery( JavaScript )

    if ($(this).is(":in-viewport(250)"))

    Now one video play at a time in the viewport