0

got myself in a bit of a pickle at the moment with a smooth scrolling one page website that has an 'intro' section (#intro) as the first section that contains a 'video'.

the video is a html5 video, on loop and autoplay and is housed inside a div container called 'intro-heading' ( originaly this contained a h1 heading but its been ommitted and replaced with video content heh )

I should point out, the div container named intro-heading, which houses the video with the id #intro-video, has the class 'growIn' applied to it, yes folks i'm using Daniel Eden's 'award winning' Animate.css library lol

so like, heres my code thus far:

    <script>
    $(document).ready(function(){
    $(window).scroll(function(){
    var x = $(document).scrollTop();
    console.log(x); /* just for observing how far from the top i am..*/

    if ($(document).scrollTop() > 750) {

        $('#intro-video').pause();

        }
    });
    });
    </script>

this doesn't work. Hwoever if i replace the $('#intro-video).pause(); line with:

$('#intro-video').css("display","none");

then the video sure enough vanishes but i can still hear the music :))

clearly then, this is NOT what I'm gunning for. All I want is the video to PAUSE (i presume with that, we cannot hear any audio which is exactly what I need) if and when the video LEAVES the viewport, AND RESUME (plays again) when we scroll back up and video re-enters the viewport.

the code above doesnt work, but when i used something else like the css display line, it works. There IS something else I'd like to ask, forgive me if i am a million miles off course from solving this by asking you this - but is there a library known as isInViewport.js , which can make this easy to achieve ? pause vid when outside of viewport - play vid when back inside!

could this plugin allow me to achieve what im after or no ?

any help at this stage would be immensely appreciated folks. thanks. :-)

Manoj Kumar
  • 41
  • 9
  • `pause` or `play` need to be called on the dom element, not jquery object -- possible duplicate of [Play/pause HTML 5 video using JQuery](http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery) – WhiteHat Feb 06 '17 at 16:39
  • I suspected that. Thanks WhiteHat. – Manoj Kumar Feb 06 '17 at 17:19

1 Answers1

0

Okay WhiteHat, thanks buddy you pointed me in the right direction. It appears I've managed to achieve what I was after. As so:

<script>
$(document).ready(function(){
$(window).scroll(function(){
    var x = $(document).scrollTop();
    console.log(x);

    if ($(document).scrollTop() > 750) {

        $('#intro-video').get(0).pause();

        }

        else if ($(document).scrollTop() < 650 ) {

            $('#intro-video').get(0).play();

        }
    });
});
</script>

This gets the job done quite nicely thanks :)

Manoj Kumar
  • 41
  • 9