jquery - Autoclose colorbox vimeo iframe video when finnished? -
i'm using colorbox display vimeo clip on pageload.
<!doctype html> <html> <head> <title>test</title> <link rel="stylesheet" href="colorbox.css" /> <link rel="stylesheet" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="jquery.colorbox-min.js"></script> <script type='text/javascript' src='bvssp-vimeo.js'></script> </head> <a style="display:none;" class="vimeo" href="http://player.vimeo.com/video/67189599?title=0&byline=0&portrait=0&badge=0&autoplay=1">hidden</a> </body> </html> bvssp-vimeo.js looks this:
jquery(function($) { $(".vimeo").colorbox({iframe:true, innerwidth:830, innerheight:466, open: true}); }); this popup iframe playing vimeo clip. works fine. wonder if there way autoclose iframe when vimeo-clip finnished. possible? best way determinate when vimeoclip finnished , automatically close iframe?
update: updated bvssp-vimeo.js following code make work:
jquery(function($) { $(".vimeo").colorbox({iframe:true, innerwidth:830, innerheight:466, open: true}); }); window.settimeout(function() { $.colorbox.close(); }, 20000); ========================== update 2:
i have found out thet solution above works it's not ideal because let's video 1min long , set time 1 min.. if you're on slow connection , video starts buffer stop playing quickly.
one solution @ vimeo froogaloop api , need here:
<!doctype html> <html> <head> <title>testar</title> <link rel="stylesheet" href="colorbox.css" /> <link rel="stylesheet" href="style.css" /> <!-- inkludera javascript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="jquery.colorbox.js"></script> <script src="froogaloop.js"></script> <!-- <script type='text/javascript' src='bvssp-vimeo.js'></script> --> </head> <body> <script type="text/javascript"> jquery(document).ready(function($blaha) { $blaha(".cboxiframe").colorbox({iframe:true, innerwidth:830, innerheight:466, open: true}); // enable api on each vimeo video jquery('iframe.cboxiframe').each(function(){ froogaloop(this).addevent('ready', ready); }); function ready(playerid){ // add event listerns froogaloop(playerid).addevent('play', play(playerid)); froogaloop(playerid).addevent('seek', seek); froogaloop(playerid).addevent('finish', finish); // fire api method froogaloop(playerid).api('play'); } function play(playerid){ alert(playerid + " playing!!!"); } function seek() { alert('seeking'); } function finish() { alert('finnished'); $blaha.colorbox.close(); } }); </script> <a style="display:none;" class="cboxiframe" href="http://player.vimeo.com/video/7100569?api=1&player_id=player2">dd</a> </body> </html> vimeo api hase solution stoping videos when ends i'm unable make work colorbox.
the code outputed colorbox seems ok , if copy firefox developer webconsole , paste directly in document works. strange...
what doing wrong?
kind regards johan
may can out.
find length of video file convert it, milliseconds, pass here settimeout.
settimeout("closeiframe()",<length of vidofile in milliseconds>); and function should work.
function check_if_open() { var t=settimeout("closeiframe()",30000); } function closeiframe() { var iframe = document.getelementbyid('someid'); iframe.parentnode.removechild(iframe); } <iframe id="someid" src="http://www.somethg.com" width="700" height="700" onload="check_if_open()"> </iframe> 
Comments
Post a Comment