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

Check the playground: http://player.vimeo.com/playground – Melroy van den Berg Jan 21 '15 at 15:50 — Melroy van den Berg, Jan 21 '15 at 15:50

jrue · Accepted Answer · 2014-08-21T23:09:24.130

23

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');
        });
    });
});

edited Aug 21 '14 at 23:09

answered Aug 04 '11 at 21:26

jrue

2,522
4
19
25

2

The jQuery Vimeo plugin jrue links to above is fantastic. Just forget Froogaloop and use that plugin if you have jQuery. – Shaun Dychko Mar 11 '15 at 04:18
This plugin is far better than the screwed-up thing called Froogaloop! Thanks @jrue ; – IcyFlame Jul 10 '15 at 04:05
Your plugin works like a charm on both Chrome and IE. Thank you for providing an easier way to handle this process. You should work for Vimeo. – klewis Jan 20 '16 at 22:28
1

hi, still getting Uncaught TypeError: Cannot read property 'ready' of undefined after trying your example ... – Braian Mellor Jan 28 '16 at 14:52
@jrue I am using your jQuery plugin. I can get the `.vimeo('play')` to work but I am having issues using the event listeners. `.on('playProgress', function(){})`. The events aren't getting attached to the iframe before the ready case does its postMessage(). I can't figure out what I am doing wrong. – gkkirsch Apr 07 '16 at 22:46
@gkkirsch Hmm, not sure. Are you dynamically loading the videos? I just made an update to the plugin for some people that were having issues of dynamically appending the iframes to the DOM. In my testing, it's working fine. `$("#myvideo").on("playProgress", function(e,d){ console.log(d);});` – jrue Apr 09 '16 at 22:59
Same issue here: still getting Uncaught TypeError: Cannot read property 'ready' of undefined after trying your example – biko Apr 26 '16 at 08:17
Thank you so much for your wonderful plugin! I was coping with the problem for more than a week (all in all)... easiest solution, even works with requirejs! THANK YOU! – Doml The-Bread Dec 21 '16 at 09:53

score 9 · Answer 2 · answered Aug 03 '11 at 23:56

9

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

Your third line would be:

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

answered Aug 03 '11 at 23:56

Jake

2,471
15
24

This fixed my issue where I was trying to show and play a video that had not yet loaded. Thanks for this. – jyoseph Nov 08 '13 at 17:06

score 4 · Answer 3 · answered Jul 24 '12 at 22:42

4

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/

answered Jul 24 '12 at 22:42

nerdess

10,051
10
45
55

Hi @nerdess - I used this code (thank you - very nice!) and discovered one minor problem: If you pause a movie, then play the same movie, it will not play. I've altered the `play` listener event so that the if statement now looks like so: `if (vimeo.currentVideo != null && vimeo.currentVideo.element != $f(player_id).element) {` which seems to correct the issue. – random_user_name Feb 05 '13 at 17:06
1

I'm curious how you would go about solving the fact that the videos get declared too late in the process (Uncaught TypeError: Cannot read property 'videos' of undefined ) – Imperative Jul 17 '14 at 18:42

Loading multiple Vimeo videos with jQuery and detecting events

3 Answers3