Recipe 6.3

Automatically Pause and Play a Video

You can use an IntersectionObserver to automatically pause a playing video if it scrolls out of view (isIntersecting is false).

When the countdown video starts, scroll the page so it moves completely out of view. The video will automatically pause. When you scroll it back into view, it will resume playing.

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit nunc vitae luctus varius. Quisque nisl purus, accumsan et hendrerit et, ornare sed lectus. Sed risus lacus, consequat ac molestie nec, molestie ac dui. Donec iaculis laoreet leo id molestie. Fusce eu quam ut nisl interdum mollis. Phasellus mollis magna at commodo aliquam. Aenean convallis nibh est, a eleifend sapien eleifend ut. Curabitur tincidunt nisi et tincidunt vehicula. Praesent gravida malesuada odio, vitae condimentum leo rutrum vitae. Praesent euismod sem sed efficitur laoreet. Morbi id nisl enim. Vivamus euismod consectetur eleifend. Aenean congue tellus leo, varius hendrerit justo aliquam a. Donec eu condimentum lorem, ut condimentum magna. Donec aliquam volutpat iaculis.

Code

JavaScript

const video = document.querySelector('#video');

const observer = new IntersectionObserver(entries => {
  if (!entries[0].isIntersecting) {
    console.log('Pausing video');
    video.pause();
  } else {
    console.log('Playing video');
    video.play();
  }
});

observer.observe(video);

HTML

<div style="max-height: 20em; overflow: auto;">
  <video id="video" style="width: 400px" controls autoplay muted loop>
    <source src="/countdown.mp4" type="video/mp4">
  </video>
  
  <p class="fs-5">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit nunc vitae luctus varius. Quisque nisl
    purus, accumsan et hendrerit et, ornare sed lectus. Sed risus lacus, consequat ac molestie nec, molestie ac dui.
    Donec
    iaculis laoreet leo id molestie. Fusce eu quam ut nisl interdum mollis. Phasellus mollis magna at commodo aliquam.
    Aenean convallis nibh est, a eleifend sapien eleifend ut. Curabitur tincidunt nisi et tincidunt vehicula. Praesent
    gravida malesuada odio, vitae condimentum leo rutrum vitae. Praesent euismod sem sed efficitur laoreet. Morbi id
    nisl
    enim. Vivamus euismod consectetur eleifend. Aenean congue tellus leo, varius hendrerit justo aliquam a. Donec eu
    condimentum lorem, ut condimentum magna. Donec aliquam volutpat iaculis.
  </p>

  <p class="fs-5">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit nunc vitae luctus varius. Quisque nisl
    purus, accumsan et hendrerit et, ornare sed lectus. Sed risus lacus, consequat ac molestie nec, molestie ac dui.
    Donec
    iaculis laoreet leo id molestie. Fusce eu quam ut nisl interdum mollis. Phasellus mollis magna at commodo aliquam.
    Aenean convallis nibh est, a eleifend sapien eleifend ut. Curabitur tincidunt nisi et tincidunt vehicula. Praesent
    gravida malesuada odio, vitae condimentum leo rutrum vitae. Praesent euismod sem sed efficitur laoreet. Morbi id
    nisl
    enim. Vivamus euismod consectetur eleifend. Aenean congue tellus leo, varius hendrerit justo aliquam a. Donec eu
    condimentum lorem, ut condimentum magna. Donec aliquam volutpat iaculis.
  </p>
</div>