jquery - pause youtube video on next slide using cycle plugin -
i have embedded youtube video in slideshow (maximage using cycle plugin) trying pause once user clicks next slide. there built in function html5 videos, i'm not sure of how same youtube. thanks!
notice before , after functions..
$(function(){ $('#maximage').maximage({ cycleoptions: { fx: 'fade', speed: 600, timeout: 0, prev: '.prev', next: '.next', pause: 1, before: function(last,current){ if(!$.browser.msie){ // start html5 video when arrive if($(current).find('video').length > 0) $(current).find('video')[0].play(); } }, after: function(last,current){ if(!$.browser.msie){ // pauses html5 video when leave if($(last).find('video').length > 0) $(last).find('video')[0].pause(); } }, onfirstimageloaded: function(){ jquery('#loader').hide(); jquery('#maximage').fadein(200); } }); });
you need make use of iframe api, otherwise cannot interact video due cross-domain policy:
var player; function onyoutubeiframeapiready() { player = new yt.player('player', { height: '390', width: '640', videoid: 'm7lc1uvf-ve', events: { 'onready': onplayerready, 'onstatechange': onplayerstatechange } }); } $('#maximage').maximage({ cycleoptions: { fx: 'fade', speed: 600, timeout: 0, prev: '.prev', next: '.next', pause: 1, before: function(last,current){ if(player != null) player.playvideo() }, after: function(last,current){ if(player != null) player.pausevideo() }, onfirstimageloaded: function(){ jquery('#loader').hide(); jquery('#maximage').fadein(200); } });
Comments
Post a Comment