FullPage.js - 暂停/播放视频答案

【问题标题】：FullPage.js - pause/play videoFullPage.js - 暂停/播放视频
【发布时间】：2015-01-05 14:29:53
【问题描述】：

我正在为我的项目使用 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');
    }

【问题讨论】：

我在你的代码中没有看到任何pause 函数。你不是想在任何地方暂停它。我什至没有看到你说的onLeave...
我粘贴的时候出错了，也已经找到解决办法了。想检查一下，也许有什么我可以改进的？

标签： javascript jquery video fullpage.js

【解决方案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

【讨论】：