YouTubeビデオを再生するときにjQueryコンテンツスライダを停止する

Question

YouTubeビデオの再生時に停止し、ビデオが停止したときに再開するjQueryコンテンツスライダを作成しようとしています。スライダーのtaprootfoundation.orgに似ています。

YouTube JavaScript APIのplayer.getPlayerState（）は、プレーヤのステータスを返します。開始されていないビデオは、-1の値を返します。

以下のスクリプトはreturn falseを使用しています。 getPlayerState（）が-1以外の値を返す場合はスライドショーを停止します。のコードの下のブロックを取り出し（その後、// YouTubeビデオの再生を検出して）、うまく動作しますが、現在は "false falseを返す" getPlayerState（）の値に関係なく起動しています。

YouTube JavaScript APIで推奨されているように、swfobjectを使用してプレーヤーを埋め込みました。ここにはscreenshot showing the HTML of the embedded playerがあります。

私は、.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); 
}); 

}）。

Answer 1

多くの髪を引き上げた後に解決しました。私はjQueryのドキュメントの先頭にあるYouTubeのAPI呼び出しを語っ場所だったやった

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

内のYouTubeのAPI呼び出しを配置するとき、私はスコープの問題を抱えていました。

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