如何让视频无法启动自动播放，只在屏幕上播放？

Question

在这个网站https://happyprime01.businesscatalyst.com/video-test.html上，该网站水平滚动，并有包含视频播放的部分，填充背景。有6个部分有自己的视频。我希望每个视频在其所在的部分在屏幕上时开始播放仅。目前，一旦页面加载，它们都会开始播放，因此错过了视频开头。

我已经尝试了下面的脚本但是没有设法让它运转起来。

对此的任何帮助将不胜感激。 感谢。

HTML

<div class="fullscreen-bg">
    <video muted autoplay class="fullscreen-bg__video">
        <source src="img/PowderPuff.mp4" type="video/mp4">
    </video>
</div>



  <script type="text/javascript">
        $(window).scroll(function() {
            $('video').each(function() {
                if ($(this).visible(true)) {
                    $(this)[0].play();
                } else {
                    $(this)[0].pause();
                }
            })
        });
    </script>