Пауза на плъзгача на jQuery, когато се възпроизвежда видео

Използвам jQuery плъзгач на моя сайт, който позволява вграждането на Vimeo видеоклипове и се чудех как мога да направя така, че ако някой щракне върху „пусни“ на vimeo видеоклипа, плъзгачът да спре да се върти автоматично, докато видеоклипът приключи или докато потребителят щракне върху „пауза“. Предполагам, че ще трябва да се докосна до API на Vimeo, за да постигна това. Ето моя код на плъзгача, всяка помощ ще бъде високо оценена!

АКТУАЛИЗАЦИЯ Реших това с помощта на Тревър, ето кода за плъзгача:

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);

И как го свързах с API на Vimeo:

(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