Question

我在我的网站上使用jQuery滑块，允许嵌入Vimeo视频，我想知道如何制作它，以便如果有人点击vimeo视频上的“播放”，滑块将停止自动旋转直到视频结束或用户点击“暂停”。我假设我需要使用Vimeo API来实现这一目标。这是我的滑块代码，非常感谢任何帮助！

UPDATE 在Trevor的帮助下解决了这个问题，这里是滑块的代码：

var slideInProgress = 0;
var currentSlideIndex = 0,
    slides;
var playing = false;    
function setTopSlider() {
    if (jQuery('#top_slider #container .slide').length != 0) {
        slides = jQuery('#top_slider #container > .slide');
        for (var i = 0; i <= slides.length; i++) {
            jQuery(slides[i]).css('left', '100%');
        }
        ;
        jQuery(slides[currentSlideIndex]).css('left', '0%');
        var el = jQuery('.dot:eq(' + currentSlideIndex + ')');
        src = el.css("background-image").replace("_off", "_over");
        el.css("background-image", src);
        el.addClass('active');
    };
};

function slide(dir) {
    if (slideInProgress != 0) {
        return;
    }
    slideInProgress = 3;
    var current, next, nextSlide;
    var slideSpeed = 200;
    current = jQuery(slides[currentSlideIndex]);
    if (!isNaN(dir)) {
        next = dir;
        if (next > currentSlideIndex)
            dir = 'left';
        else
            dir = 'right';
    };
    if (dir == 'left') {
        if (!next) {
            next = currentSlideIndex + 1;
            if (next >= slides.length) {
                next = 0;
            }
        }
        nextSlide = jQuery(slides[next]);
        nextSlide.css('left', '100%');
        nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);
        //nextSlide.animate({left: '0%'}, 1500);
        nextSlide.animate({
            left: '0%'
        }, {
            duration: slideSpeed,
            complete: function() {
                slideInProgress--;
            }
        });
        //current.animate({left: '-100%'}, 1500);
        current.animate({
            left: '-100%'
        }, {
            duration: slideSpeed,
            complete: function() {
                slideInProgress--;
            }
        });

    } else {
        console.log('moving right');
        if (!next) {
            next = currentSlideIndex - 1;
            if (next < 0) {
                next = slides.length - 1;
            }
        }
        nextSlide = jQuery(slides[next]);
        nextSlide.css('left', '-100%');
        nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);
        //nextSlide.animate({left: '0%'}, 1500);
        nextSlide.animate({
            left: '0%'
        }, {
            duration: slideSpeed,
            complete: function() {
                slideInProgress--;
            }
        });
        //current.animate({left: '100%'}, 1500);
        current.animate({
            left: '100%'
        }, {
            duration: slideSpeed,
            complete: function() {
                slideInProgress--;
            }
        });

    }
    current.addClass('active');
    nextSlide.removeClass('active');
    var el = jQuery('.dot:eq(' + currentSlideIndex + ')');
    src = el.css("background-image").replace("_over", "_off");
    el.css("background-image", src);
    el.removeClass('active');
    el = jQuery('.dot:eq(' + next + ')');
    src = el.css("background-image").replace("_off", "_over");
    el.css("background-image", src);
    el.addClass('active');
    console.log('currentSlideIndex' + currentSlideIndex);
    console.log('next' + next);
    console.log('dir' + dir);
    currentSlideIndex = next;
    // **** //
    slideInProgress--;
    // **** //
}
setTopSlider();
playing = setInterval(function() {slide('left')}, 6000);

以及我如何将其与Vimeo API联系起来：

(function () {

    var $=jQuery;


    var f = $('iframe');
    var url = f.attr('src').split('?')[0]; <?php //HACK! had to hard code the protocol in here or postMethod shows error: Uncaught SyntaxError: An invalid or illegal string was specified. ?>
    //var status = $('.status');


    // Listen for messages from the player
    if (window.addEventListener){
        window.addEventListener('message', onMessageReceived, false);
    } else {
        window.attachEvent('onmessage', onMessageReceived, false);
    }

    // Handle messages received from the player
    function onMessageReceived(e) {
        var data = JSON.parse(e.data);


        switch (data.event) {
            case 'ready':
                onReady();
                break;

            case 'playProgress':
                onPlayProgress(data.data);
                break;

            case 'pause':
                onPause();
                break;

            case 'finish':
                onFinish();
                break;
        }
    }

    // Call the API when a button is pressed
    $('button').on('click', function() {
        post($(this).text().toLowerCase());
    });

    // Helper function for sending a message to the player
    function post(action, value) {
        var data = { method: action };

        if (value) {
            data.value = value;
        }
        $('iframe')[0].contentWindow.postMessage(JSON.stringify(data), url);
    }

    function onReady() {


        post('addEventListener', 'pause');
        post('addEventListener', 'finish');
        post('addEventListener', 'playProgress');
    }

    function onPause() {
        console.log("vimeo paused");
    }

    function onFinish() {
        playing = setInterval(function() {slide('left')}, 6000);
        console.log("vimeo finish");
        slide('left');
    }

    function onPlayProgress(data) {
        clearInterval(playing);
        console.log("vimeo play progress");
    }
})();

Answer 1

如何创建一个布尔变量playing并使用它来跟踪视频播放的时间。如果视频正在播放，则不要运行幻灯片功能。

e.g。

var playing = false;

function slide(dir) {
   if(playing)
        return false;
   ...
}

function onPause() {
    playing = false;
    console.log("vimeo paused");
}

function onFinish() {
    playing = false;
    console.log("vimeo finish");
    slide('left');
}

function onPlayProgress(data) {
    playing = true;
    console.log("vimeo play progress");
}

播放视频时暂停jQuery滑块

1 个答案: