Autoplay on scroll in Javascript

Mattepuffo's logo
Autoplay on scroll in Javascript

Autoplay on scroll in Javascript

Programmazione, Javascript - AJAX

Quello che vogliamo ottenere è che il video si avvii quando scrolliamo o facciamo il resizing di una pagina web.

In base ovviamente a determinate misure/posizione.

Ci basterà un pò di Javascript.

Qui sotto un codice di esempio (non sono necessarie librerie esterne):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>

  <body>
    <video id="video" src="video.mp4"></video>
    <script>
      const video = document.getElementById('video');

      function loadVideo() {
        const rect = video.getBoundingClientRect();
        if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
          video.play();
        } else {
          video.pause();
        }
      }

      window.addEventListener('scroll', loadVideo);
      window.addEventListener('resize', loadVideo);
    </script>
  </body>
</html>

Enjoy!

Condividi

Commentami!