仅在滚动到视图时播放视频答案

【问题标题】：Play video only when scrolled into view仅在滚动到视图时播放视频
【发布时间】：2018-04-09 12:29:21
【问题描述】：

在此侧滚动页面https://happyprime01.worldsecuresystems.com/video-test.html 的第三页和第四页/面板上有一个视频。我希望第三个面板中的视频只有在面板出现后才开始播放。我有以下使用提到的 jquery.appear 插件here

但我无法让它工作。下面是我正在尝试的。请问有人可以帮忙吗？

    <div id="item3" class="item">                   

            <!--video fills page section -->
            <div class="fullscreen-bg">
                <video id="vid-P" muted poster="img/bg-dynamically.jpg" class="fullscreen-bg__video  video-powder">
                    <source src="img/PowderPuff.mp4" type="video/mp4">
                </video>
            </div>                                             

        </div>
    </div>
    <!--end-->

    <script type="text/javascript" src="js/jquery.appear.js"></script>

    <script>

        var myVideo = document.getElementById('vid-P');

    //when div with id item3 is in view play video
   $('#item3').on('appear', function(event, $all_appeared_elements) {


        if (appear) {
              // element is now visible in the viewport
             $("#item3").on('appear', myVideo.play);
            } else {
              // element has gone out of viewport
             $("#item3").on('disappear', myVideo.pause);
            }
  });


    </script>

【问题讨论】：

我相信正确的用法是$("#item3").on('appear', myVideo.play)和$("#item3").on('disappear', myVideo.pause)
感谢您对此的关注，非常感谢！我尝试了您的想法（类似于下面的建议），但都没有为我工作，希望接近。我已经根据你们俩的建议更新了上面的脚本。你还能看到我哪里出错了吗？
我已经设法开始工作，但最终采用了此处显示的方法cdnjs.com/libraries/vissense/tutorials/autoplay-video - 再次感谢您的关注。

标签： jquery video html5-video

【解决方案1】：

您没有在代码中的任何地方定义appear，因此if (appear) { 将失败，因为您的条件appear = undefined。

您可以改用appear 和disappear 事件：

 $('#item3').on('appear', myVideo.play)
            .on('disappear', myVideo.pause);

【讨论】：

您好，感谢您帮我看这个，非常感谢！我已经根据我认为你的意思更新了上述内容，但它仍然无法正常工作。我现在拥有的就是你的意思吗？我也试过没有 if/else 语句的代码，但也没有用。
这最终对我有用 cdnjs.com/libraries/vissense/tutorials/autoplay-video - 再次感谢您对此的关注，这很有帮助

【解决方案2】：

这个网站上显示的方法对我有用 https://cdnjs.com/libraries/vissense/tutorials/autoplay-video 与上面类似，但这对我来说立即奏效了。

    var myVideo = document.getElementById('myVideo');

    VisSense.VisMon.Builder(VisSense(myVideo, { fullyvisible: 0.75 }))
    .on('fullyvisible', function(monitor) {
      myVideo.play();
    })
    .on('hidden', function(monitor) {
      myVideo.pause();

    })
    .build()
    .start();

【讨论】：