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

Question

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

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

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

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

javascript

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

Answer 1

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

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

Ответы