javascript - Vimeo JS API Issue // Fading/moving a div according to differerent video events and player_IDs -
javascript - Vimeo JS API Issue // Fading/moving a div according to differerent video events and player_IDs -
what want to is:
autoplay first movie, fadeout div "logo" , move div "menu" downwards (bottom:0 bottom:-56, horizontal reddish line @ viewable @ bottom) while playing -->works fadein div "logo" , move div "menu" when paused-->works when first video finishes, fade out, fade in div "logo", fade in sec video, (auto)play sec video, move div "menu" downwards 1 time again --> lastly 2 dont work :( , if video playing, hovering/clicking "collapsed"/moved viewable rest of div "menu" (the reddish line), should "uncollapse" or move 1 time again --> havent started that, sigh!these iframes, embedded in div:
<iframe id="player_1" class="vimeo" src="http://player.vimeo.com/video/34799219?api=1&player_id=player_1&?title=0&byline=0&portrait=0&color=ab0009&autoplay=1" width="100%" height="100%" frameborder="0"></iframe> <iframe id="player_2" class="vimeo" src="http://player.vimeo.com/video/3595635?api=1&player_id=player_2&?title=0&byline=0&portrait=0&color=ab0009&autoplay=0" width="100%" height="100%" frameborder="0"></iframe>
and here's script:
$('#player_2').hide(); jquery(document).ready(function() { /* froogaloop reference our specific iframe. in froogaloop2 phone call api functions on object, not on iframe anymore */ var vid1; var vid2; froogaloop( $('#player_2')[0] ).addevent('ready', function() { vid2 = $f( $('#player_2')[0] ); }); froogaloop( $('#player_1')[0] ).addevent('ready', function() { vid1 = $f( $('#player_1')[0] ); vid1.addevent('play', function() { $('#menu').animate({"bottom": "-56px"}, "slow"); $('#logo').fadeout('slow'); }); vid1.addevent('pause', function() { $('#menu').animate({"bottom": "0px"}, "slow"); $('#logo').fadein('slow'); }); vid1.addevent('finish', function() { $('#menu').animate({"bottom": "0px"}, "slow"); $('#logo').fadein('slow'); $('#player_1').fadeout(400); $('#player_2').fadein(400); document.getelementbyid('player_2').api_play(); }); vid2.addevent('play', function() { $('#menu').animate({"bottom": "-56px"}, "slow"); $('#logo').fadein('slow'); }); vid2.addevent('pause', function() { $('#menu').animate({"bottom": "0px"}, "slow"); }); vid2.addevent('finish', function() { $('#menu').animate({"bottom": "0px"}, "slow"); $('#logo').fadein('slow'); $('#player_1').fadeout(400); $f(vid1).api('pause'); $('#player_2').fadein(400); $f('#player_2').api('play'); }); }); });
if help me that?
javascript api video playback vimeo
Comments
Post a Comment