Vimeo and AnythingSlider -
how vimeo video play again when anythingslider gets video frame?
<script> // dom ready $(function(){ $('#slider').anythingslider({ resizecontents : true, addwmodetoobject : 'transparent', navigationformatter : function(index, panel){ // format navigation labels text return ['promo video', 'photo #1', 'photo #2', 'photo #3', 'photo #4'][index - 1]; }, startpanel : 1, autoplay : true, delay : 5000 }); }); </script> <div id="slider_holder" style="width:984px;height:610px;"> <ul id="slider"> <li class="panel1"> <iframe src="http://player.vimeo.com/video/55968550?title=0&byline=0&portrait=0" width="984" height="554" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </li> <li class="panel2"> photo #1 </li> <li class="panel3"> photo #2 </li> <li class="panel4"> photo #3 </li> <li class="panel5"> photo #4 </li> </ul> </div>
currently, after slider plays video, goes through photos, , goes video - video remains @ end. there way can make video start on @ beginning?
using latest version of anythingslider (v1.9+), video extension code called separately anythingslider plugin. so, can use following code restart video after has completed (demo):
/* play video when comes view, after has completed */ $.fn.anythingslidervideo.services.vimeo1.cont = function(base, $vid, index) { base.video.postmsg('{"method":"play"}', $vid[0].id); }; $(function () { $('#slider') .anythingslider({ resizecontents: true, navigationformatter: function (index, panel) { return ['promo video', 'photo #1', 'photo #2', 'photo #3', 'photo #4'][index - 1]; }, startpanel: 1, autoplay: true, delay: 5000 }) .anythingslidervideo({ wmode: 'transparent&autoplay=1' // (hack) add autoplay code here }); });
it's kind of hack, if have one video on starting page, make video autoplay, add &autoplay=1
wmode
option.
Comments
Post a Comment