Download multiple Vimeo videos using jQuery and detect events

Question

Ok, I'm completely stuck. I really hope someone has experience downloading Vimeo videos with the Vimeo Froogaloop API .

It seems I can’t get the "finished" event.

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 json $('#video-container iframe').ready(function(){ player = document.querySelectorAll('iframe')[0]; $f(player).addEvent('ready', function(id){ console.log('success'); }); }); }); 

The video is loading perfectly. This is the message I get in the console:

 Uncaught TypeError: Cannot read property 'ready' of undefined 

I need to use event listeners to detect pauses, etc. I saw this post , but unfortunately the main difference is that I dynamically load via JSON. In addition, Vimeo has a working Froogaloop example in action, but not with jQuery.

Thanks in advance!

Answer 1

Change (August 2014) . I recently wrote a jQuery Vimeo plugin that basically solves this problem much more elegantly. But the solution, if you are hard coding, is below:

When downloading a Vimeo video, you must include the &api=1 query string in the URL. This allows you to make API calls. Vimeo also requires &player_id=SOME_ID if you intend to upload multiple videos that must match the iframe ID that it uploaded (or, in my case, use jQuery to add it to the iframe after loading JSON, as I am creating it dynamically.)

I lost half a day on this. Here is what my final code came out if it is useful for anyone trying to download a Vimeo video dyanmically.

Using Vimeo Froogaloop Infrastructure

 <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 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 finished event for iframes.

Your third line will be:

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

Answer 3

I “forked” your example and created a version that shows vimeo play / pause with multiple videos using apogo froogaloop. so if you run one video, all other videos stop to play: http://jsfiddle.net/nerdess/D5fD4/3/