Stop a jQuery content slider when playing a YouTube video -


i trying create jquery content slider stop when youtube video played , resume when video stopped. similar slider on taprootfoundation.org.

player.getplayerstate() in youtube javascript api returns status of player. video has not started should return value of -1.

my script below uses return false; stop slideshow if getplayerstate() returns value other -1. taking bottom block in code below (followed //detect playing youtube video) out, works fine, "return false;" firing regardless of getplayerstate() value.

i used swfobject embed player, recommended in youtube javascript api. here's screenshot showing html of embedded player.

i must calling .getplayerstate() incorrectly, i'm not sure how correct it.

$(document).ready(function(){ //initial setup     //adds class "last" 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 index of next active banner item in slideshow     var indexcurrent = $next.prevall().length;      //removes "active" class link-tab items have     $('.link-tab.active').removeclass('active');     //gives class "active" next link-tab item     $('.link-tab').eq(indexcurrent).addclass('active');      $active.addclass('last-active');      //function slide down 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 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 - stopping regardless of player state     video = document.getelementbyid("boundless-playground-video");     if(video.getplayerstate() != -1){         return false;     } };  //run function once on document ready show first slide slideswitch();  $(function(){     setinterval( "slideswitch()", slidetime); }); 

});

resolved after pulling of hair. having scope issue when placing youtube api call inside

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

what did place said youtube api call in top of jquery document.

//playerstate variable shows status of youtube video.  //see http://code.google.com/apis/youtube/youtube_player_demo.html //currently hardcoded 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); }); 

Comments

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

java - Android recognize cell phone with keyboard or not? -

iphone - How would you achieve a LED Scrolling effect? -