Loading multiple Vimeo videos with jQuery and detecting events

Question

OK, I'm completely stuck. I'm really hoping that someone out there might have experience loading Vimeo videos with Vimeo's Froogaloop API.

I can't seem to get the 'ready' event to catch.

Froogaloop:

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

My script:

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('http://vimeo.com/27027307') + '&width=300&callback=?', function(data){
    $('#video-container').html(data.html); //puts an iframe embed from vimeo's json
    $('#video-container iframe').ready(function(){
        player = document.querySelectorAll('iframe')[0];
        $f(player).addEvent('ready', function(id){
            console.log('success');
        });

    });
});

The video loads fine. This is the message I'm getting in the console:

Uncaught TypeError: Cannot read property 'ready' of undefined

I need to use event listeners for detecting pauses, etc. I saw this post, but unfortunately, the main difference is that I'm loading dynamically via JSON. Also, Vimeo has a working example of the Froogaloop in action, but not with jQuery.

Thanks in advance!!!

Answer 1

Edit (Aug 2014): I recently wrote a jQuery Vimeo plugin, which basically solves this problem much more elegantly. But the solution, if you're hard coding, this is below:

When loading Vimeo videos, you have to include the query string &api=1 to the URL. This allows you to make API event calls. Vimeo also requires a &player_id=SOME_ID if you're going to have multiple videos loading, which needs to match the id on the iframe it's loaded (or in my case, use jQuery to add it to the iframe after JSON is loaded, since I'm creating it dynamically.)

I lost half a day on this. Here is what my final code came out to if it's helpful to anyone else trying to load Vimeo videos dyanmically.

Using Vimeo's Froogaloop framework

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

my js

var videoData = [
{
    'title':'The Farm',
    'id':'farmvideo',
    'videoURL':'http://vimeo.com/27027307'
}];

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData[0]['videoURL']) + '&api=1&player_id='+ videoData[0]['id'] +'&width=300&callback=?', function(data){
    $('#video-container').html(data.html); //puts an iframe embed from vimeo's json
    $('#video-container iframe').load(function(){
        player = document.querySelectorAll('iframe')[0];
        $('#video-container iframe').attr('id', videoData[0]['id']);
        $f(player).addEvent('ready', function(id){
            var vimeoVideo = $f(id);
            console.log('success');
        });
    });
});

Answer 2

Try using the load event instead of the ready event for iframes.

Your third line would be:

$('#video-container iframe').load(function(){

Answer 3

i've "forked" your example and created a version that shows playing/pausing vimeo with multiple videos using the froogaloop api. so if you start one video all other videos are stopping to play: http://jsfiddle.net/nerdess/D5fD4/3/