Cargando varios videos de Vimeo con jQuery y detectando eventos

Question

OK, estoy completamente atascado. Realmente espero que alguien por ahí tenga experiencia en cargar videos de Vimeo con Vimeo's Froogaloop API.

Parece que no puedo atrapar el evento 'listo'.

Froogaloop:

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

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

    }); 
}); 

El vídeo cargas bien. Este es el mensaje que estoy recibiendo en la consola:

Uncaught TypeError: Cannot read property 'ready' of undefined 

Tengo que utilizar los detectores de eventos para la detección de pausas, etc. vi this post, pero, por desgracia, la diferencia principal es que estoy cargando dinámicamente a través de JSON . Además, Vimeo tiene un working example del Froogaloop en acción, pero no con jQuery.

Gracias de antemano!

Answer 1

edición (agosto de 2014): Recientemente escribí una jQuery Vimeo plugin, que básicamente resuelve este problema mucho más elegante. Pero la solución, si tiene una codificación difícil, es la siguiente:

Al cargar videos de Vimeo, debe incluir la cadena de consulta &api=1 en la URL. Esto le permite realizar llamadas a eventos API. Vimeo también requiere un &player_id=SOME_ID si va a cargar varios videos, que debe coincidir con el id del iframe que está cargado (o en mi caso, use jQuery para agregarlo al iframe después de que se cargue JSON, ya que estoy creándolo dinámicamente.)

Perdí medio día en esto. Aquí está el resultado de mi código final si es útil para cualquier otra persona que intente cargar dinámicamente videos de Vimeo.

Usando marco Froogaloop de Vimeo

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

mis 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

Intente utilizar el evento load en lugar del evento listo para iframes.

Su tercera línea sería:

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

Answer 3

que he "bifurcada" tu ejemplo y ha creado una versión que muestra de juego/vimeo deteniéndose con varios vídeos utilizando el API froogaloop. así que si comienzas un video todos los otros videos se detienen para jugar: http://jsfiddle.net/nerdess/D5fD4/3/