Postosuchus
Превед! Вопрос таков. Нужно чтобы видео (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. Мож, может кто помочь?