FullPage.js

Question

我正在为我的项目使用 FullPage.js。我想在离开该部分时暂停我的背景视频，并在我从开始或暂停点再次返回时继续。

为此，我添加了以下代码：

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

然后正如您在这句话下面看到的那样，我试图暂停视频 onLeave。仍然没有成功。但它与显示警报的示例完美配合。不知道该怎么办。任何指导将不胜感激。

这是我页面的 JS 文件的一部分：

$(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');
    }

Answer 1

下面是看起来很完美的方法：

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

FullPage.js - pause/play video

javascript

jquery

video