Воспроизвести несколько видимых элементов видео - PullRequest
0 голосов
/ 03 апреля 2020

Я нашел интересное руководство по использованию 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);

Любая помощь?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...