Vimeo 和 AnySlider答案

【问题标题】：Vimeo and AnythingSliderVimeo 和 AnySlider
【发布时间】：2013-05-13 20:33:26
【问题描述】：

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>

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

【问题讨论】：

标签： vimeo anythingslider

【解决方案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
    });
});

这是一种 hack，但如果起始页上只有一个视频，那么要让视频自动播放，请将 &autoplay=1 添加到 wmode 选项。

【讨论】：