Vimeo Froogaloop API no reconoce un evento

Question

Estoy tratando de reconocer el evento onPlay, onPause y onFinish para vimeo usando la API froogaloop. He intentado todo lo que pude imaginar con esta cosa y no tuve suerte.

me sale este error en Firefox:

Y en Chrome:

Importación froogaloop de la CDN:

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

Mis JS:

$(function(){ 

    var vimeoPlayer = document.querySelector('iframe'); 

    $f(vimeoPlayer).addEvent('ready', ready); 

    function ready(player_id) { 

     froogaloop = $f(player_id); 

     function setupEventListeners() { 
      function onPlay() { 
       froogaloop.addEvent('play', 
       function(data) { 
        console.log('play event'); 
       }); 
      } 

      function onPause() { 

       froogaloop.addEvent('pause', 
       function(data) { 
        console.log('pause event'); 
       }); 
      } 

      function onFinish() { 
       froogaloop.addEvent('finish', 
       function(data) { 
        console.log('finish'); 
       }); 
      } 
      onPlay(); 
      onPause(); 
      onFinish(); 
     } 
     setupEventListeners(); 
    } 

}) 

Mi HTML:

<iframe src="http://player.vimeo.com/video/3718294?api=1" width="623" height="350" frameborder="0" id="iframe-video"></iframe> 

Answer 1

Después de horas y horas de frustración ... He encontrado la solución.

Como estaba usando una ID en el iframe ... al parecer, la API de vimeo obliga a agregar el parámetro a la URL que está buscando (player_id = iframe-id).

lo tanto, el marco flotante debe tener este aspecto:

gracias

<iframe src="//player.vimeo.com/video/3718294?api=1&player_id=promo-vid" 
     width="623" height="350" frameborder="0" 
     id="promo-vid"> 
</iframe> 

especiales con Drew Baker por señalar esto: http://vimeo.com/forums/topic:38114#comment_5043696

Answer 2

Creo que está violando la Same Origin Policy. Notarás here que cuando estás haciendo un montón de manejo de eventos, están usando llamadas especiales de froogaloop API.

Nunca he usado froogaloop, así que probablemente estoy equivocado. Pero esa es mi suposición. Los errores parecen sugerir que el iframe está intentando modificar la URL en su navegador, y eso ahora lo permite Same Origin. Es por eso que la API cierra window.postMessage por ti.

Answer 3

Habiendo tenido un problema similar, con Froggaloop2 - parece ser que si el vídeo es en caché, el evento listo se disparará solo una vez (en la carga inicial). La solución consiste en recuperar el iframe src con el cambio, como:

$(iframe).attr('src', $(iframe).attr('src') + '#timestamp='+(new Date()).getTime()); 

Answer 4

Tienes un error al crear el elemento reproductor hora de seleccionar el iframe con jQuery.

var iframe = $('#player1'); 
var player = $f(iframe); 

Resultados en

TypeError: d[f] is undefined 

solución para mí fue seleccionar el primer elemento en el selector de jQuery ID

var iframe = $('#player1')[0]; 
var player = $f(iframe);