Имитация клика на видео через скрипт

Общие вопросы по HTML, CSS, JavaScript, JQuery, вопросы по HTML, вопросы без определенной темы

Имитация клика на видео через скрипт

» » Сообщение:

Привет Админ.
В очередной раз нужен твой мудрый совет.

Как можно с имитировать клик на видео в iframe ?

У меня есть вот такой скрипт:

Код: Выделить всё Развернуть
<a href="ссылка" id="link">Open link</a>
<script>
document.getElementById("link").click()
</script>

Скрипт имитирует клик на ссылку и переходит по ней.

А вот сделать тоже самое с видео не получается.
Пробовал так:

Код: Выделить всё Развернуть
<iframe id="link" width="640" height="360" src="https://www.youtube.com/embed/Nn8X0PldAVY?rel=0" frameborder="0" allowfullscreen></iframe>
<script>
document.getElementById("link").click()
</script>

Ещё так:

Код: Выделить всё Развернуть
<div id="link" style="width: 640px;height: 360px;z-index: 1000;position: absolute;opacity: 0;"></div><iframe width="640" height="360" src="https://www.youtube.com/embed/Nn8X0PldAVY?rel=0" frameborder="0" allowfullscreen></iframe>
<script>
document.getElementById("link").click()
</script>

Т.е. наложил div блок на iframe и сделал блок прозрачным, типа чтобы клик происходил сквозь div блок на iframe =)

В общем оба способа не сработали. Что ещё можно придумать?



Re: Имитация клика на видео через скрипт

rons » » Сообщение:

Добрый день.
Есть код:

Код: Выделить всё Развернуть
<script src="http://yastatic.net/jquery/1.8.3/jquery.min.js"></script>

<iframe class="prostodiv" width="550" height="320"></iframe>

<div class="rep"></div>

<div class="prostodiv">клац</div>

<script>$(function(){ $('.prostodiv').live('click', function() { $('.rep').html('<div>работает</div>');  }); });</script>

Если просто по диву кликать, все работает, а по iframe нет ) , почему так?
Как его заставить работать при клике по фрейму?


Re: Имитация клика на видео через скрипт

Admin » » Сообщение:

rons писал(а) › 11.10.2016, 23:42:Если просто по диву кликать, все работает, а по iframe нет ) , почему так?
Код: Выделить всё Развернуть
<iframe class="prostodiv" width="550" height="320" src="#"></iframe>
<script type="text/javascript">
$('.prostodiv').click(function(){
   alert('Ok');
});
</script>

Но фрейм должен быть с вашего домена



Re: Имитация клика на видео через скрипт

Admin » » Сообщение:

rons писал(а) › 12.10.2016, 00:08:Фрейм с ютуба

Я догадался..)
Клик - не прокатит.

Мыдаров Рустам писал(а) › 29.04.2016, 19:31:Как можно с имитировать клик на видео в iframe ?

Имитировать клик в чужом окне НИКАК не получится.
Вам что конкретно надо? Запустить видео? или что?

“Можно использовать решение, основанное на событиях blur и mouseover/mouseout. Плагин господина Vince iframeTracker jQuery plugin разработан как раз для детекта кликов по iframe’ам”

Работает типа так:

Код: Выделить всё Развернуть
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/b21ZZkiq3rc" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript" src="/javascript/jq.iframetracker.js"></script>
<script type="text/javascript">
$('#player').iframeTracker({
      blurCallback: function(){
      // здесь происходит событие клик на iframe
            alert('ok');
      }
});
</script>

Re: Имитация клика на видео через скрипт

rons » » Сообщение:

Мне нужно, чтобы при клике, или появлении курсора в области фрейма, показывалась картинка в диве.
Для компов вполне подходит mouseenter вместо клика. Только вот на планшетах mouseenter не работает (.
Не знаю как решить задачку.


Re: Имитация клика на видео через скрипт

Admin » » Сообщение:

rons писал(а) › 12.10.2016, 00:23:Не знаю как решить задачку.
Код: Выделить всё Развернуть
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/b21ZZkiq3rc" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript" src="http://likbezz.ru/javascript/jq.iframetracker.js"></script>
<script type="text/javascript">
$('#player').iframeTracker({
      blurCallback: function(){
            alert('ok'); // здесь код вставляющий картинку в див...
      }
});
</script>

Re: Имитация клика на видео через скрипт

rons » » Сообщение:

Круто, работает! Благодарю за помощь.

Добавлено спустя 8 минут 9 секунд:

Можно использовать решение, основанное на событиях blur и mouseover/mouseout

Опять же mouseover/mouseout, не знаю будет ли работать на планшнтах? Сейчас нет возможности проверить.

Добавлено спустя 13 минут 45 секунд:

This plugin doesn't work on mobile devices such as smartphones and tablets, because this hardware uses a touchscreen instead of a mouse as click input. This design makes the boundary monitoring trick useless.

Re: Имитация клика на видео через скрипт

Admin » » Сообщение:

rons писал(а) › 12.10.2016, 01:01:Опять же mouseover/mouseout, не знаю будет ли работать на планшнтах?

Не знаю, не проверял. На эмуляторах смартфонов - не работает. Там вообще много чего из обычного JS не работает..
Проверите - напишите )

С другой стороны, никто не мешает вам написать обработчик для дива-обложки, при клике по которой, в нее будет динамически вставляться фрейм с автоплеем.. ну и картинка в блок..
Костыль, конечно, но имеет место быть.

Типа как тут:

Re: Имитация клика на видео через скрипт

Re: Имитация клика на видео через скрипт

rons » » Сообщение:

Admin писал(а) › 12.10.2016, 01:03:С другой стороны, никто не мешает вам написать обработчик для дива-обложки, при клике по которой, в нее будет динамически вставляться фрейм с автоплеем

Про такой вариант, я не подумал. Попробую.

Убрать картинку есть такой скрипт:
<script>$(function hideDiv(){ $('#DivTimer').delay(10000).fadeOut('fast'); })</script>

Как сюда прикрутить .live() ?



Re: Имитация клика на видео через скрипт

rons » » Сообщение:

Admin,

Код: Выделить всё Развернуть
<script src="http://yastatic.net/jquery/1.8.3/jquery.min.js"></script>

<div class="rep"></div>

<div class="prostodiv">клац</div>

<script>$(function(){ $('.prostodiv').live('click', function() { $('.rep').html('<div class="DivTimer">работает</div>');  }); });</script>

При клике по "prostodiv" вставляется "DivTimer"
Так вот, нужно что-бы через 10 сек "DivTimer" присвоить display:none
<script>$(function hideDiv(){ $('.DivTimer').delay(10000).fadeOut('fast'); })</script>

Так как на страницу будут вставлены новые элементы <div class="DivTimer">
То скрыть его нужно вживую .live()

В общем так работает

Код: Выделить всё Развернуть
<script>
setTimeout(function() {
    $('.DivTimer').fadeOut('fast');
}, 20000);
</script>

==========
Проверил на планшете плагин, не работает. Буду делать как Вы посоветовали через обработчик для дива-обложки. Вопрос закрыт. Спасибо.


Re: Имитация клика на видео через скрипт

Admin » » Сообщение:

rons писал(а) › 12.10.2016, 20:43:При клике по "prostodiv" вставляется "DivTimer"
Так вот, нужно что-бы через 10 сек "DivTimer" присвоить display:none
Код: Выделить всё Развернуть
<script src="http://yastatic.net/jquery/1.8.3/jquery.min.js"></script>
<div class="rep"></div>
<div class="prostodiv">клац</div>
<script type="text/javascript">
$('.prostodiv').click(function(){
   $('<div class="DivTimer">работает</div>').appendTo('.rep').delay(10000).fadeOut('fast');
});
</script>
rons писал(а) › 12.10.2016, 20:43:То скрыть его нужно вживую .live()

Вы не совсем понимаете для чего эта функция..

Код: Выделить всё Развернуть
<script src="http://yastatic.net/jquery/1.8.3/jquery.min.js"></script>
<div class="prostodiv">клац</div>
<script type="text/javascript">
$('.prostodiv').click(function(){
   $('<div class="DivTimer">работает</div>').appendTo('.rep').delay(10000).fadeOut('fast');
});
</script>
<br />
<a href="javascript://" onclick="$('.prostodiv').prepend('<div class=\'rep\' />');return false;">Вставить блок</a>
rons писал(а) › 12.10.2016, 20:43:В общем так работает

Можно и так..

Код: Выделить всё Развернуть
<script type="text/javascript">
$('.prostodiv').click(function(){
   $('.rep').html('<div class="DivTimer">работает</div>',setTimeout(function(){$('.DivTimer').fadeOut('fast')},10000));
});
</script>

- да вариантов вообще масса...

rons писал(а) › 12.10.2016, 20:43:Проверил на планшете плагин, не работает.

Да я подозревал - проверил в эмуляторе - не работало..
Печалька..(

rons писал(а) › 12.10.2016, 20:43:Спасибо.

Пожалуйста)


Re: Имитация клика на видео через скрипт

rons » » Сообщение:

Admin,
Нашел я то что искал.

Код: Выделить всё Развернуть
<iframe title="YouTube video player"  width="560" height="315" src="https://www.youtube.com/embed/b21ZZkiq3rc" frameborder="0" allowfullscreen></iframe>



<div class="video">
<iframe title="YouTube video player"  width="560" height="315" src="https://www.youtube.com/embed/QuXkvWYGTIs" frameborder="0" allowfullscreen></iframe>
</div>


<div id="mess"></div>

<script>
var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(document.querySelector('.video') && elem.title == 'YouTube video player'){
      mess.innerHTML = 'Clicked';
        clearInterval(monitor);
    }
}, 100);
</script>

Клик срабатывает по обоим плеерам, как сделать чтобы срабатывал только по тому что в class="video" ?


След.



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0339Истек период сессии. Обновить/продл...
Сообщение от: Admin
11677Re: Скрипт быстрый поиск по entery ...
Сообщение от: Admin
0770Стоп спамер. Проверка пользователей...
Сообщение от: Admin
21406Re: Закладки пользователя для сайта...
Сообщение от: Admin
0976Простой и небольшой скрипт определя...
Сообщение от: Admin