Я нашел интересное руководство по использованию IntersectionObserver для воспроизведения / приостановки видео при прокрутке, но я не смог заставить его работать на странице с несколькими видео.
Затем я нашел этот пост: HTML5 и Javascript для воспроизведения видео только при отображении
Но единственный ответ из того, что работает, заключается в следующем, и я не могу заставить его работать над мобильные браузеры:
function playVisibleVideos() {
document.querySelectorAll("video").forEach(video => elementIsVisible(video) ? video.play() : video.pause());
}
function elementIsVisible(el) {
let rect = el.getBoundingClientRect();
return (rect.bottom >= 200 && rect.right >= 0 && rect.top <= 500 && rect.left <= (window.innerWidth || document.documentElement.clientWidth));
}
let playVisibleVideosTimeout;
window.addEventListener("scroll", () => {
clearTimeout(playVisibleVideosTimeout);
playVisibleVideosTimeout = setTimeout(playVisibleVideos, 100);
});
window.addEventListener("resize", playVisibleVideos);
window.addEventListener("DOMContentLoaded", playVisibleVideos);
Любая помощь?