Запуск video при попадании в зону видимости

Question

Возможно ли сделать запуск видео при попадании в область видимости? Буду очень благодарен за помощь!

<video src="spas_com2.mp4" controls="controls" frameborder="0" allowfullscreen="" height="auto" width="auto" style="max-width: 50%;padding-top: 20px;" class="spas_com2"></video>

Answer 1

Вот пример как это можно реализовать. Как только scrollTop будет равен или больше верхней позиции элемента видео, то включится воспроизведение. Не все браузеры разрешают автовоспроизведение видео без атрибута muted.

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();
  };
});

#container {
  overflow-y:scroll;
  height: 300px;
}
#video {
  margin: 600px 0;
}

<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>

БЛОГ НА HUSL

Запуск video при попадании в зону видимости

Ответы (1 шт):