当AnythingSlider返回视频帧时,如何让Vimeo视频再次播放?
<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>
目前,在滑块播放视频后,浏览照片,然后返回视频 - 视频保留在最后。有没有办法让视频在开始时重新开始?
答案 0 :(得分:0)
使用最新版本的AnythingSlider(v1.9 +),视频扩展代码与AnythingSlider插件分开调用。因此,您可以使用以下代码在视频完成后重新启动视频(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
});
});
这是一种黑客行为,但如果您在起始页面上只有一个视频,那么要使视频自动播放,请将&autoplay=1
添加到wmode
选项