С нами с 02.10.15
Сообщения: 19
Рейтинг: -7
|
Добавлено: 19/06/19 в 16:39 |
Превед! Вопрос таков. Нужно чтобы видео (HTML5, тэг video) начинало проигрываться только тогда, когда находится на экране (при прокрутке страницы). За экраном - автоматом на паузу.
Есть код. Он работает:
Код: [развернуть] | $(function() {
var $video = $('.video');
var $window = $(window);
$window.scroll(function() {
var $topOfVideo = $video.offset().top;
var $bottomOfVideo = $video.offset().top + $video.outerHeight();
var $topOfScreen = $window.scrollTop();
var $bottomOfScreen = $window.scrollTop() + $window.innerHeight();
if(($bottomOfScreen > $bottomOfVideo) && ($topOfScreen < $topOfVideo)){
$video[0].play();
} else {
$video[0].pause();
}
});
}); |
... но, работает только тогда, когда на странице только одно видео. Если видео несколько (несколько тэгов video), то срабатывает только на первом. Как подрихтовать код выше, чтобы он срабатывал для всех видео на странице? Знаю, что нужно использовать оператор for и указать id для каждого видео, но не силен в JS. Мож, может кто помочь?
|
|
|
|
Текстовая реклама в форме ответа Заголовок и до четырех строчек текста Длина текста до 350 символов Купить рекламу в этом месте! |