Скрипт не срабатывает при попадании в зону видимости

Рейтинг: 0Ответов: 1Опубликовано: 20.02.2023

Подскажите почему скрипт не срабатывает, когда видео появляется в зоне видимости?

const container = document.getElementById("container");
    const video = document.getElementById("video")
    const videoRect = video.getBoundingClientRect();
    
    container.addEventListener("scroll", (event) => {
      if (container.scrollTop >= videoRect.top) {
        video.play();
      };
    });
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>

<div id="container">
  <video id="video" width="400" height="300" muted>
            <source src="https://joy1.videvo.net/videvo_files/video/free/2014-12/large_watermarked/Raindrops_Videvo_preview.mp4" type="video/mp4">
  </video>
</div>

<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Вы должны навесить событие addEventListener на родительский контейнер. В примере сделал на window. Видео запускается только когда достигнет верхней границы экрана, ваш алгоритм запуска не менял.

const video = document.getElementById("video")
const videoRect = video.getBoundingClientRect();

window.addEventListener("scroll", (event) => {
  if (event.target.scrollingElement.scrollTop >= videoRect.top) {
    video.play();
  };
});
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>

<div id="container">
  <video id="video" width="400" height="300" muted>
            <source src="https://joy1.videvo.net/videvo_files/video/free/2014-12/large_watermarked/Raindrops_Videvo_preview.mp4" type="video/mp4">
  </video>
</div>

<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>
<div>Текст</div>