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&amp;player_id=player_1&amp;?title=0&amp;byline=0&amp;portrait=0&amp;color=ab0009&amp;autoplay=1" width="100%" height="100%" frameborder="0"></iframe> <iframe id="player_2" class="vimeo" src="http://player.vimeo.com/video/3595635?api=1&amp;player_id=player_2&amp;?title=0&amp;byline=0&amp;portrait=0&amp;color=ab0009&amp;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

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -