Как захватить событие клика с помощью jQuery для iframe?

Question

Я пытаюсь приостановить слайдер на домашней странице, когда видео воспроизводится, чтобы оно не продолжало скользить. Проверьте это здесь .

Я попытался добавить div поверх него и зафиксировать события щелчка для div, но это не работает. Это просто передает события на iframe я полагаю. Обратите внимание, что iframe загружает контент из Vimeo, а не с моего сайта.

Есть идеи, как заставить это работать, или любой другой способ приостановить слайдер при воспроизведении видео? Кажется, я зашел в тупик без вариантов ...

Answer 1

Еще один метод обнаружения кликов в маленьком фрейме, например, в фрейме Facebook, - использовать события mouseenter и mouseleave.

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

Кажется невозможным захватить событие щелчка iFrame, когда контент находится в другом домене. Одним из решений, которое может быть достаточно хорошим, является приостановка анимации всякий раз, когда пользователь наводит указатель мыши на iframe, а затем повторное воспроизведение, когда мышь уходит. Кажется, это работает нормально, даже если пользователь выбирает полноэкранный режим в проигрывателе 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>

Вот мой маленький тест http://jsfiddle.net/r8guJ/

Answer 3

Кажется, что было бы проще использовать API Vimeo для регистрации событий, запущенных игроком.

Пример можно найти здесь: https://github.com/vimeo/vimeo-api-examples/blob/master/moogaloop-api/javascript/froogaloop.html

Документация: http://vimeo.com/api/docs/moogaloop

В ДЕЙСТВИИ: http://jsfiddle.net/u5jG6/

Answer 4

Вы можете использовать этот плагин jQuery: https://github.com/finalclap/iframeTracker-jquery.

Выберите фрейм vimeo player с помощью селектора jQuery и установите функцию обратного вызова, которая отключит слайдер (или сделает что-нибудь еще):

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