FullPage.js

Question

我正在使用FullPage.js on the following website: http://servicetrackingsystems.com/index.html

第一部分有两张幻灯片，每 12 秒向右滑动一次，我的 FullPage.js 功能自定义如下：

$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors: ['Home', 'Products', 'Services', 'AboutUs', 'Clients', 'Contact'],
        menu: '#menu',
        css3: true,
        scrollOverflow:true,
        fixedElements: '.nav_bar',
        slidesNavigation: true,
        afterLoad: function(anchor, index){
          if(index == 1){
              $('.nav_bar').fadeOut();
               idInterval = setInterval(function () {
                    $.fn.fullpage.moveSlideRight();
                }, 12700);
          }else{
              $('.nav_bar').fadeIn();
              clearInterval(idInterval);
          }
        }
    });
});

每张幻灯片中嵌入的视频如下：

<video autoplay loop poster="img/bg/home1.jpg" id="bgvid1">
    <source src="video/home1_v3.webm" type="video/webm">
    <source src="video/home1_v3.mp4" type="video/mp4">
</video>

<video autoplay loop poster="img/bg/home2.jpg" id="bgvid2">
    <source src="video/home2_v3.webm" type="video/webm">
    <source src="video/home2_v3.mp4" type="video/mp4">
</video>

问题来了：

每个视频恰好 12 秒长。 $.fn.fullpage.moveSlideRight();函数似乎只在 "afterLoad" 回调中起作用，一旦整个页面和所有元素都完成加载就会触发。

In Chrome: 第一个背景视频在整个页面加载完成后开始播放，幻灯片恰好在每个视频循环时向右移动，因此您不会重新开始时看到任一视频跳转。

在 Firefox 中： 第一个背景视频立即开始播放，即使网站的其余部分正在加载，所以 $.fn.fullpage.moveSlideRight();间隔从视频的中途开始，导致视频循环时非常明显的跳跃。

所以我的问题是如何调整我的脚本以在所有浏览器中正常工作，并让 $.fn.fullpage.moveSlideRight();转换恰好在每个自动播放的视频循环时发生。在此先感谢您的帮助！

Answer 1

我不确定它是否适用于所有浏览器，我知道一些，例如 Safari，默认情况下用于阻止自动播放和非交互式 js play() 方法，并且可能仍然如此。无论如何，这是适合您的代码：

$(function () {
    var isContinuousLoop = true;
    $('#fullpage').fullpage({
        afterLoad: function (anchorLink, index) {
            if (1 == index) {
                $.fn.fullpage.moveTo(1, 0);
            }
        },
        onLeave: function (index, nextIndex, direction) {
            if (1 == index) {
                $('#bgvid1').get(0).pause();
                $('#bgvid2').get(0).pause();
            }
        },
        afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
            if (1 == index) {
                var $vid = (0 == slideIndex) ? $('#bgvid1') : $('#bgvid2');
                var callback = function () {
                    $vid.get(0).play();
                    console.log('playing video ' + index + ' ' + slideIndex);
                    $vid.on('ended', function () {
                        $vid.off('ended');
                        $vid.get(0).pause();
                        var nextSlideIndex = (0 == slideIndex) ? 1 : 0;
                        if (isContinuousLoop || 1 == nextSlideIndex) {
                            $.fn.fullpage.moveTo(1, nextSlideIndex);
                        }
                    });
                };
                if ($vid.get(0).readyState > 3) {
                    callback();
                } else {
                    $vid.on('canplay', function() {
                        $vid.off('canplay');
                        callback();
                    });
                }
            }
        },
        onSlideLeave: function (anchorLink, index, slideIndex, direction, nextSlideIndex) {
            var $vid = (0 == slideIndex) ? $('#bgvid1') : $('#bgvid2');
            $vid.get(0).pause();
            console.log('stopping video ' + index + ' ' + slideIndex);
        }
    });
});

确保从您的视频标签中删除 autoplay 和 loop 属性。

FullPage.js - 背景视频循环时向右移动幻灯片

FullPage.js - Move slide to the right when background videos loop

html

javascript

video

autoplay