Play video only when scrolled into view

Question

On this side scrolling page https://happyprime01.worldsecuresystems.com/video-test.html there is a video on the third and fourth page/panel. I want the video in the third panel to only start playing once the panel is in view. I have the following which uses the jquery.appear plugin mentioned here

But I can not get it to work. Below is what I am trying. Can anybody assist with this please?

    <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>

I *believe* the correct usage is `$("#item3").on('appear', myVideo.play)` and `$("#item3").on('disappear', myVideo.pause)` — SIGSTACKFAULT, Apr 09 '18 at 12:38
Thanks for your attention on this, I appreciate it heaps! I tried your idea (similar to the suggestion below), neither have worked for me yet, hopefully am close. I have updated my script above based on what you both are suggesting. can you see where I am going wrong still? — Grant, Apr 09 '18 at 22:09
I've managed to getting working but ended up going with the approach shown here https://cdnjs.com/libraries/vissense/tutorials/autoplay-video - thanks again for your attention. — Grant, Apr 10 '18 at 02:21

score 2 · Answer 1 · answered Apr 09 '18 at 12:35

2

You didn't define appear anywhere in the code, so if (appear) { will fail because your condition appear = undefined.

You can use the appear and disappear events instead:

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

answered Apr 09 '18 at 12:35

Phiter

14,570
14
50
84

Hi there, thanks for looking at this for me, I appreciate it! I've updated the above based on what I think you meant but it's not working still. Was what I have now what you meant? I have tried your code without the if/else statements as well but that didn't work either. – Grant Apr 09 '18 at 22:06
This worked for me in the end https://cdnjs.com/libraries/vissense/tutorials/autoplay-video - thanks again for your attention on this, it was helpful – Grant Apr 10 '18 at 02:23

score 1 · Accepted Answer · answered Apr 10 '18 at 02:26

The approach shown on this site worked for me https://cdnjs.com/libraries/vissense/tutorials/autoplay-video Similar to the above, but this worked straight away for me.

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

Play video only when scrolled into view

2 Answers2