Vimeo和AnythingSlider

Question

当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&amp;byline=0&amp;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>

目前，在滑块播放视频之后，浏览照片，然后返回到视频-视频仍然在最后。有没有办法让视频从头开始？

Answer 1

使用最新版本的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选项中。