Remove EventListener and resume video play

Question

I have a video which I pause with javascript by adding addEventListener.

The video is on autoplay and when the video reach the 5s it pause.

var video = document.getElementById('home-hero-video');
video.addEventListener("timeupdate", function () {
    if (this.currentTime >= 5.000) {
        this.pause();
    }
}, false);

What I want is on scroll down the video to start/resume playing again from the 5s to the end.

   var scrollableElement = document.body;

    scrollableElement.addEventListener('wheel', checkScrollDirection);

    function checkScrollDirection(event) {
        if (checkScrollDirectionIsUp(event)) {
            // console.log('scroll UP');
        } else {
           video.removeEventListener("timeupdate");
           video.play();
        }
    }

user_2813224 · Answer

In order to detect what direction the user is scrolling, we need to:

define a counter outside of any function (start)
```
let start = 0;
```

bind the window object to the scroll event

window.addEventListener('scroll', function() {//...

next, get the distance between the top of viewport and the top of the (stop)
```
const bcr = document.body.getBoundingClientRect();
const stop = bcr.top;
```
and when the scroll event fires, compare the the values of start and stop. If start is greater than stop then user is scrolling down.
```
if (stop < start) {//...
```
when that condition is met, unbind the video from the timeupdate event and resume .play()
```
video.play();
video.removeEventListener('timeupdate', first5Sec);
```

Note the only way to remove an event listener is have both .addEventListener() and .removeEventListener() match in the element they are bound to and the parameters:

DOMObject.addEventListener(event, eventHandler, capture)
DOMObject.removeEventListener(event, eventHandler, capture)
// The only difference between them is ".add" and ".remove"

Details are commented in example

Do not do anything until the video is paused, then scroll down

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

video.addEventListener("timeupdate", first5Sec);

function first5Sec(e) {
  if (this.currentTime >= 5.000) {
    this.pause();
  }
}
// Define counter outside of function
let start = 0;

// Bind window to the scroll event
window.addEventListener('scroll', function() {
  // Reference the BCR of 
  const bcr = document.body.getBoundingClientRect();
  /*
  Get the distance from the top of viewport and the top of the body
  */
  const stop = bcr.top;
  /*
  If that distance is less than start, resume video
  */
  if (stop < start) {
    video.play();
    /*
    Unbind video from 'timeupdate' event Both .addEventListener() and
    .removeEventListener() must be identical in parameters
    */
    video.removeEventListener('timeupdate', first5Sec);
  }
  // Set start as stop for the next scroll
  start = stop;
});

:root {
  font: 300 62.5%/1 'Segoe UI';
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

section {
  display: flex;
  justify-content: center;
  min-height: 200vh;
  font-size: 1.6rem;
}

figure {
  position: fixed;
  top: 20px;
  width: 30%;
}

video {
  width: 100%;
  object-fit: contain;
}

Remove EventListener and resume video play

1 Answers