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 - 暂停/播放视频

1 个答案: