javascript - customize - La API de Vimeo Froogaloop no reconoce un evento

vimeo hide controls

Question

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:

Y en Chrome:

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>

Answer 1

Al haber tenido un problema similar con Froggaloop2, parece que si el video está en caché, 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());

Answer 2

Creo que estás violando la Política de Mismo Origen . Notarás here que donde estás haciendo mucho 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

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

Answer 4

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