jQuery and Vimeo Froogaloop API

Question

I'm building a plugin to WordPress and so far so good with the PHP library. But I am having some issues with the JavaScript API.

I'm trying to use it with jQuery, and I think the WordPress version of jQuery is messing with the $f shortcut. Why wouldn't this work?

var vimeoPlayer = {

    init: function() {
        var vimeoPlayers = document.querySelectorAll('iframe'),
        player;

        jQuery('iframe.vimeo-player').each(function(index, iframe){
            player = vimeoPlayers[index];
            $f(player).vimeoPlayer.addEvent('ready', vimeoPlayer.ready);
        });
    },

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

    ready: function(player_id) {
        alert(player_id);
    }
}

jQuery(document).ready(function($){
    vimeoPlayer.init.call();
});

You can see it in action at temp.woodshop.tv/?work/?dickies-campaign/?.

I get this error:

TypeError: Result of expression '$f(player).vimeoPlayer' [undefined] is not an object.

score 18 · Accepted Answer · edited Mar 05 '15 at 01:43

One issue is that addEvent is both a function that you've defined and also a method of the $f(player) object. It appears that you're confusing the two. The addEvent method of the $f(player) object only takes two arguments, the name of the player event and the function to be called. It should be used as $f(your-iframe).addEvent('vimeo event', your_function);

Your addEvent function will unify events between IE and W3C methods. It's not needed because you're using jQuery. jQuery(whatever).click() does the same thing. I don't see any part of your snippet where you need it but if you do, I'd just use the jQuery method.

Also, the video player object should be $f(player) instead of $f(player).vimeoPlayer

Try this

jQuery('iframe.vimeo-player').each(function(){
    $f(this).addEvent('ready', ready);
});

Another thing to note is that any additional player events need to be added from your ready callback function. For example:

function ready(player_id){
    $f(player_id).addEvent('play', play);
    $f(player_id).api('play');
    alert("Ready!!!");
}
function play(){
    alert("Playing!!!");
}

I've had a hard time finding the info I want on Vimeo's Froogaloop api but after scouring Vimeo Froogaloop API Playground about a dozen times I'm starting to get the idea of how it works.

Good luck!

Hey Jon, I turned this into a working example here: http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html — Drew Baker, Aug 18 '11 at 10:44
Brilliant thank you! Vimeo's own API examples leave a bit to be desired. — Simon27, Jul 01 '13 at 14:05
Thanks so much, this helped me better than vimeo's playground example (after spending a few hours toying with it). — ShayneStatzell, Jun 13 '14 at 18:09

score 0 · Answer 2 · edited Jun 20 '11 at 03:08

0

Instead of $f(player).vimeoPlayer.addEvent try $(this).addEvent.

edited Jun 20 '11 at 03:08

Peter Mortensen

30,738
21
105
131

answered May 14 '11 at 03:43

seoul

864
1
12
32

Thanks, but the $f() is a shortcut for the Vimeo API, so it needs to be there. I did however get it closer like this: Froogaloop(this).addEvent('ready', vimeoPlayer.ready); But that gives an "eventCallbacks[target_id] is undefined on line 22." Error in their API. – Drew Baker May 14 '11 at 17:47
Lets analyze: "$f(player).vimeoPlayer.addEvent('ready', vimeoPlayer.ready)", here $f(player) takes an iframe (or HTML) tag as input and should return something which has vimeoPlayer as an object (because only then this code is correct). . .but carefully examining it is found neither $f(player) returns anything nor vimeoPlayer is declared before used as an object here....So I do not know how to help you in this case :-( i'm only able to find out the problem...sorry Drew – seoul May 18 '11 at 08:51
Or: ```jQuery('iframe.vimeo').each(function(){ Froogaloop(this).addEvent('ready', ready); });``` – Melroy van den Berg Jan 21 '15 at 16:28

jQuery and Vimeo Froogaloop API

2 Answers2

Linked