How do I get a Vimeo video to play again when the AnythingSlider gets back to the video frame?
<script>
// DOM Ready
$(function(){
$('#slider').anythingSlider({
resizeContents : true,
addWmodeToObject : 'transparent',
navigationFormatter : function(index, panel){ // Format navigation labels with 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 the slider plays the video, goes through the photos, and then goes back to the video - the video remains at the end. Is there a way I can make the video start over at the beginning?
Using the latest version of AnythingSlider (v1.9+), the video extension code is called separately from the AnythingSlider plugin. So, you can use the following code to restart a video after it has completed (demo):
/* play video when it comes into view, even after it 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 a hack, but if you only have one video on the starting page, then to make the video autoplay, add the &autoplay=1
to the wmode
option.