vimeoanythingslider

Vimeo and AnythingSlider


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&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>

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?


Solution

  • 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.