Multiple Vimeo videos with FlexSlider JS

I hope someone can help. I’ve searched and searched for a solution to this, and I’ve played around with the Javascript, but it’s just beyond me. I’m hoping that someone else can understand this.

FlexSlider does a great job as a carousel, but if you want multiple videos I can’t get them to stop the FlexSlider animation, or stop playing automatically if the user triggers the next carousel slide.

It’s easily enough to do with one. The following Javascript shows how this is done. But as you can see, it relies on the element having an ID. The problem is that I have an unknown amount of videos. Sometimes there could be one. Sometimes there could be 20.

If there any way of modifying the code below so that it could handle any number of videos?

var player = document.getElementById('player_1');

$f(player).addEvent('ready', ready);

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false)
    } else {
        element.attachEvent(eventName, callback, false);
    }
}

function ready(player_id) {
    var froogaloop = $f(player_id);
    froogaloop.addEvent('play', function(data) {
        $('.flexslider').flexslider("pause");
    });
    froogaloop.addEvent('pause', function(data) {
        $('.flexslider').flexslider("play");
    });
}    

$(".flexslider").flexslider({
    animation: "slide",
    animationSpeed: Modernizr.touch ? 600 : 1000,
    slideshowSpeed: 3500,
    controlsContainer: "#carousel",
    useCSS: false,
    start: function(){
        $(".flex-control-nav").css("margin-left", "-" + $(".flex-control-nav").width()/2 + "px");
    },
    before: function(slider){
        $f(player).api('pause');
    }
});

The PHP/HTML looks like this:

<div class="flexslider">
    <ul class="slides">
    <?php  for($i=0;$i<$slideCount;$i++) { ?>
        <li>
            <?php if($slides[$i]["type"] == "1") { ?>
                <div class="video">
                    <iframe id="player_1" width="1000" height="500" frameborder="0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen src="http://player.vimeo.com/video/<?php echo $slides[$i]["URL"]; ?>?api=1&player_id=player_1"></iframe>
                </div>
            <?php } else { ?>
                <a href="explore.php?item=<?php echo $slides[$i]["slideID"]; ?>">
                <img src="static/images/slides/<?php echo $slides[$i]["slideID"]; ?>/<?php echo $slides[$i]["URL"]; ?>" alt="<?php echo htmlspecialchars($slides[$i]["headline"], ENT_QUOTES, "UTF-8"); ?>" width="868" height="488"  /></a>
            <?php } ?>
<       /li>
    </ul>
</div>

Possible solution: Run the FOR loop and count the number of Videos, then create a number of different instances of $f(player) in Javascript. Is there a better way?

Leave a Reply

*

Hire Me
Follow Me!
Search
Most Popular Articles & Pages
Because your vote is Important
Sorry, there are no polls available at the moment.
Categories