Остановить слайдер содержимого jQuery при воспроизведении видео на YouTube

Я пытаюсь создать ползунок содержимого jQuery, который останавливается при воспроизведении видео на YouTube и возобновляется при остановке видео. Аналогично ползунку на taprootfoundation.org.

player.getPlayerState() в API JavaScript YouTube возвращает статус игрок. Видео, которое еще не началось, должно возвращать значение -1.

Мой скрипт ниже использует return false; чтобы остановить слайд-шоу, если getPlayerState() возвращает любое значение, кроме -1. Убрав нижний блок в приведенном ниже коде (за которым следует //обнаружение воспроизведения видео на YouTube), он работает нормально, но в настоящее время "return false;" срабатывает независимо от значения getPlayerState().

Я использовал swfobject для встраивания проигрывателя, как это рекомендовано в YouTube JavaScript API. Вот скриншот, показывающий HTML-код встроенного проигрывателя.

Должно быть, я неправильно вызываю .getPlayerState(), но не знаю, как это исправить.

$(document).ready(function(){
//initial setup
    //adds class "last" to last link-tab item
    $('.link-tab:last').addClass('last');

    //moves summary elements down out of view
    $('.rotate-image > div').children('.summary').css({bottom:-150});

//initial variables
    var captionAnimationTime = 300;
    var captionPauseTime = 4800;
    var slideTime = 6000;

//detect playing YouTube video
/*  window.setTimeout(function(){
            video = document.getElementById("boundless-playground-video");
    }
    , captionAnimationTime);
*/
//main function
slideSwitch = function(){
    var $active = $('.rotate-image > div.active');

    if ($active.length == 0) $active = $('.rotate-image > div:last');

    var $next = $active.next().length ? $active.next() : $('.rotate-image > div:first');

    //sets indexCurrent variable as the index of the next active banner item in the slideshow
    var indexCurrent = $next.prevAll().length;

    //removes "active" class from link-tab items that already have it
    $('.link-tab.active').removeClass('active');
    //gives class "active" to next link-tab item
    $('.link-tab').eq(indexCurrent).addClass('active');

    $active.addClass('last-active');

    //function to slide down the caption
    captionDown = function(){
        $next.children('.summary').animate({bottom:-150}, captionAnimationTime);
    }

    $next.css({opacity:0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 700, function(){
            //remove classes from the previously active item
            $active.removeClass('active last-active');

            //animates slide of summary element
            $next.children('.summary').animate({bottom: 0}, captionAnimationTime);
            window.setTimeout(captionDown, captionPauseTime);
        });

    //detect playing YouTube video - currently stopping regardless of player state
    video = document.getElementById("boundless-playground-video");
    if(video.getPlayerState() != -1){
        return false;
    }
};

//run the function once on document ready to show first slide
slideSwitch();

$(function(){
    setInterval( "slideSwitch()", slideTime);
});

});


person Mike Eng    schedule 01.12.2010    source источник
comment
Я думаю, вам нужно будет показать код, который управляет ползунком. Мы можем посоветовать вызовы API, но не знаем, как именно вы реализуете свой слайдер. Если только код не совпадает с приведенной ссылкой.   -  person Orbling    schedule 01.12.2010
comment
привяжите функцию, которая останавливает ползунок jQuery (используя любой метод, который есть у ползунка jQuery, например, $('#slider').stop(); ) к событию onStateChange проигрывателя YouTube (см. API).   -  person davidosomething    schedule 01.12.2010
comment
обновил вопрос с помощью моего кода, управляющего ползунком.   -  person Mike Eng    schedule 08.12.2010


Ответы (1)


Решил это после того, как сильно потянул за волосы. У меня возникла проблема с областью действия при размещении вызова API YouTube внутри

jQuery $(document).ready(function(){
});

Что я сделал, так это поместил указанный вызов API YouTube в верхнюю часть документа jQuery.

//playerState variable shows status of YouTube video. 
//see http://code.google.com/apis/youtube/youtube_player_demo.html
//currently hardcoded with id of video
function onYouTubePlayerReady(){
  ytplayer = document.getElementById('boundless-playground-video');
  ytplayer.addEventListener('onStateChange','onytplayerStateChange');
}
function onytplayerStateChange(newState) {
  playerState = newState;
}

$(document).ready(function(){
//insert other stuff here
if (typeof (playerState) == 'undefined'){
window.playerState = 5;
}
alert(window.playerState);
});
person Mike Eng    schedule 10.12.2010