Cómo capturar evento de clics con jQuery para iframe?

Question

Estoy tratando de pausar el control deslizante en la página de inicio cuando se reproduce un video para que no siga deslizándose. Verifique here.

He intentado agregar un div encima y capturar los eventos de clic para el div, pero eso no funciona. Simplemente pasa los eventos al iframe, supongo. Tenga en cuenta que el iframe está cargando contenido desde Vimeo, no desde mi sitio.

¿Alguna idea sobre cómo hacer que esto funcione, o de alguna otra manera para poner en pausa el control deslizante cuando se reproduce el video? Parece que estoy en un callejón sin salida sin opciones ...

Answer 1

Parece que sería más fácil usar la API de Vimeo para registrarse para eventos disparados por el jugador.

Un ejemplo se puede encontrar aquí: https://github.com/vimeo/vimeo-api-examples/blob/master/moogaloop-api/javascript/froogaloop.html

Documentación: http://vimeo.com/api/docs/moogaloop

EN ACCIÓN:http://jsfiddle.net/u5jG6/

Answer 2

No parece posible capturar el evento click de un iFrame cuando el contenido es de otro dominio. Una solución que podría ser lo suficientemente buena es pausar la animación cada vez que el usuario mueve el mouse sobre el iframe y luego volver a reproducirlo cuando el mouse se va. Esto parece funcionar bien incluso si el usuario elige ir a pantalla completa en el reproductor de Vimeo.

<div class="item"> 
<iframe src="http://player.vimeo.com/video/20183913?title=0&amp;byline=0&amp;portrait=0" width="612" height="344" frameborder="0"></iframe> 
</div> 

<script type="text/javascript"> 
$("div.item iframe") 
.mouseover(function(){ 
    alert("Pause animation"); 
}) 
.mouseout(function(){ 
    alert("Play animation"); 
}); 
</script> 

Aquí está mi pequeña prueba http://jsfiddle.net/r8guJ/

Answer 3

Otro método de detección de clics en un pequeño marco flotante, tales como el iframe Facebook, es utilizar el MouseEnter y MouseLeave eventos.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fisthegovernmentopen.info%2F&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe> 

var inIframe = false; 
$('iframe[src^="http://www.facebook.com"]') 
.bind('mouseover', function(){ 
    console.log('entered iframe'); 
    inIframe = true; 
    setTimeout(function() { 
    if (inIframe) { console.log('clicked on iframe'); } 
    }, 1000); 
}) 
.bind('mouseout', function(){ 
    console.log('left iframe'); 
    inIframe = false; 
}); 

http://jsfiddle.net/gQzeA/

Answer 4

Puede utilizar este plugin jQuery: https://github.com/finalclap/iframeTracker-jquery.

seleccionar el reproductor de vimeo iframe con un selector de jQuery y establecer una función de devolución de llamada que se apague el control deslizante (o hacer cualquier otra cosa):

jQuery(document).ready(function($){ 
    $('.vimeo_player iframe').iframeTracker({ 
     blurCallback: function(){ 
      // Stop your slider 
     } 
    }); 
});