Приостановка ползунка jQuery при воспроизведении видео

Я использую слайдер jQuery на своем сайте, который позволяет встраивать видео Vimeo, и мне было интересно, как я могу сделать так, чтобы, если кто-то нажмет «воспроизвести» на видео vimeo, слайдер перестанет автоматически вращаться до тех пор, пока видео завершится или пока пользователь не нажмет «пауза». Я предполагаю, что для этого мне понадобится подключиться к Vimeo API. Вот мой код слайдера, любая помощь приветствуется!

ОБНОВЛЕНИЕ Решил это с помощью Тревора, вот код слайдера:

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

person APAD1    schedule 11.11.2013    source источник


Ответы (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");
}
person Trevor    schedule 11.11.2013
comment
@ APAD1, пожалуйста, отметьте этот ответ как принятый, если он ответил на ваш вопрос, в противном случае дайте отзыв о том, что не решено. Спасибо - person Trevor; 12.11.2013
comment
Привет, Тревор, к сожалению, эта проблема пока отошла на второй план, поскольку были запрошены более важные изменения, но я обязательно вернусь к вам по этому поводу. Спасибо! - person APAD1; 15.11.2013
comment
Эй, Тревор, зарезервировал сегодня немного времени, чтобы снова изучить это, и хотя я не использовал логическую переменную, ваше предложение привело меня к решению (я обновлю свой исходный пост кодом). Большое спасибо за Вашу помощь! - person APAD1; 16.11.2013