La API de Vimeo Froogaloop no reconoce un evento

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

Recibo este error en Firefox:

Permiso denegado para <code> <http://player.vimeo.com> </ code> para obtener propiedad de mascotas Location.toString

Y en Chrome:

JavaScript inseguro intenta acceder al marco con URL ... desde el marco con URL `http://player.vimeo.com/video/3718294?api=1. Deben coincidir los dominios, protocolos y puertos.

Importación de froogaloop desde el CDN:

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

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

Después de horas y horas de frustración … Encontré la solución.

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

Entonces el iFrame debería verse así:

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

Un agradecimiento especial a Drew Baker por señalar esto: http://vimeo.com/forums/topic:38114#comment_5043696

Obtuve un error al crear el elemento de jugador al seleccionar el iframe con jQuery .

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

Resultados en

 TypeError: d[f] is undefined 

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

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

Creo que estás violando la Política de Mismo Origen . Notarás aquí que donde estás haciendo mucho event handling events, están usando llamadas especiales de froogaloop API.

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

Al haber tenido un problema similar con Froggaloop2, parece que si el video está en caching, el evento listo se activará solo una vez (en la carga inicial). La solución es recuperar el iframe con el cambio de src, como:

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