经过大量搜索，我们在网站上启用了带有语音滚动的自动播放功能，但有一个问题

Question

经过大量搜索后，我们在网站上开始了带声音的自动播放，但有一个问题，每当视频进入视口时，它会自动开始，但当另一个视频进入视口时，上面的视频应该停止。只要两个视频都保留在视口内，就会同时播放。

这是我的代码：

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();  }
        });
    }
});

问题：
它不像 Instagram 或 Facebook 那样一次只能播放一个视频。

如果两个视频同时位于视口内，是否可以调整视口大小（或类似内容）？如何停止第一个视频并播放第二个视频（向上或向下滚动后最新视频进入视口）？

• 问题的示例图像。两个视频同时播放

• 请检查我的示例 HTML 页面：https://pintrafeed.com/directory

Answer 1

经过多次研究和精细改变方法，我得到了这个答案 我已经改变了 jQuery（JavaScript）

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

现在在视口中一次播放一个视频