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
Post a Comment