FullPage.js - pause/play video

Question

I am using FullPage.js for my project. I want to pause my background video while leaving the section, and resume when I back again from start or point it was paused.

To do that I've add the following code:

onLeave: function(index, nextIndex, direction){
        //after leaving section 2
        if(index == 1 && direction =='down'){
            alert("Going to section 1! Video should be paused right now");
        }

        else if(index == 2 && direction == 'up'){
            alert("Going to section 1! The video should be running!");
            $('video').get(0).play();
        }
    }

and then as you can see under this words i tried to pause video onLeave. Still not succesful. But it worked perfectly with example where the alert is displayed. Don't know what to do. Any guidance will be much appreciated.

Here's part of my page's JS file:

$(document).ready(function() {
function initialization(){
$('#fullpage').fullpage({
    verticalCentered: false,
    sectionsColor: ['#282828', '#ffffff', '#ffffff', '#ffffff', '#0b974d'],
    anchors: ['home', 'finder', 'info', 'calc', 'contact'],
    menu: '#mainNav',
    responsive: 1024,
    scrollOverflow: true,
    touchSensitivity: 15,
    normalScrollElementTouchThreshold: 5,
    keyboardScrolling: true,
    animateAnchor: true,
    css3: true,
    scrollingSpeed: 1500,
    autoScrolling: true,
    scrollBar: false,
    easing: 'easeInQuart',
    easingcss3: 'ease', 
    afterRender: function(){
            //playing the video
            $('video').get(0).play();
        } ,//afterRender End
    afterLoad: function(anchorLink, index){
    if(anchorLink == 'finder'){
      $('#mainNav').hasClass('menu-bg2');
      $('#mainNav').removeClass('menu-bg2');
        $('#mainNav').addClass('menu-bg1');

    }
    else if(anchorLink == 'info'){
      $('#mainNav').hasClass('menu-bg1');
      $('#mainNav').removeClass('menu-bg1');
      $('#mainNav').addClass('menu-bg2');
    }
    else if(anchorLink == 'home'){
      $('#mainNav').hasClass('menu-bg1');
      $('#mainNav').hasClass('menu-bg2');
      $('#mainNav').removeClass('menu-bg1');
      $('#mainNav').removeClass('menu-bg2');
    }
     else if(anchorLink == 'contact'){
      $('#mainNav').hasClass('menu-bg2');
      $('#mainNav').removeClass('menu-bg2');
       $('#mainNav').addClass('menu-bg1');
     }
     else if(anchorLink == 'calc'){
      $('#mainNav').hasClass('menu-bg1');
      $('#mainNav').removeClass('menu-bg1');
      $('#mainNav').addClass('menu-bg2');
    }

I don't see any `pause` function anywhere in your code. You are not trying to pause it anywhere. I don't even see the `onLeave` you are talking about... — Alvaro, Jan 05 '15 at 17:49
my mistake while pasting, already found a solution too. Would like to check, maybe there is something I can improve? — , Jan 05 '15 at 21:39

score 1 · Accepted Answer · answered Jan 05 '15 at 21:38

Here's what seem to work perfectly:

onLeave: function(index, nextIndex, direction){
      var vid = document.getElementById("myVideo");
      if(index == 1 && direction =='down'){
            alert("Going to section 1! Video should be paused right now");
            vid.pause();

        }

        else if(index == 2 && direction == 'up'){
            alert("Going to section 1! The video should be running!");
            vid.play();
        }
    },//onLeave END

FullPage.js - pause/play video

1 Answers1