Deactivate the EventListener to continue playing the video

Question

Deactivate the EventListener to continue playing the video

I have a JavaScript function that pauses a video when it reaches 5 seconds.


    <video id="home-hero-video" preload autoplay="autoplay" muted="muted">
       <source src="videourl.mp4" type="video/mp4">
    </video>

The video automatically starts playing and stops at the 5-second mark using an event listener.

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

I want the video to resume playing from the 5-second mark to the end when scrolling down.

   var scrollableElement = document.body;

    scrollableElement.addEventListener('wheel', checkScrollDirection);

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

javascript

Answer 1

Answer №1

To determine the direction in which the user is scrolling, follow these steps:

Begin by initializing a counter outside of any function (start)
```
let start = 0;
```

Bind the window object to the scroll event

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

Then, calculate the distance between the top of the viewport and the top of the <body> (stop)
```
const bcr = document.body.getBoundingClientRect();
const stop = bcr.top;
```
Upon firing the scroll event, compare the values of start and stop. If start is greater than stop, it means the user is scrolling down.
```
if (stop < start) {//...
```
Once this condition is met, unbind the video from the timeupdate event and resume playing the video using .play()
```
video.play();
video.removeEventListener('timeupdate', first5Sec);
```

Note: The only way to remove an event listener is to ensure that both .addEventListener() and .removeEventListener() match in terms of the element they are bound to and their respective parameters.

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

Make sure not to take any action until the video is paused, then proceed to scroll down

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

video.addEventListener("timeupdate", first5Sec);

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

// Bind window to the scroll event
window.addEventListener('scroll', function() {
  // Get the BCR of <body>
  const bcr = document.body.getBoundingClientRect();
  /*
  Calculate the distance from the top of the viewport to the top of the body
  */
  const stop = bcr.top;
  /*
  If the distance is less than the start, play the video
  */
  if (stop < start) {
    video.play();
    /*
    Unbind the video from the 'timeupdate' event. Both .addEventListener() and
    .removeEventListener() must have identical parameters
    */
    video.removeEventListener('timeupdate', first5Sec);
  }
  // Set stop as the new start 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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
  <section>
    <figure>
      <video src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" preload autoplay muted></video>
    </figure>
  </section>

</body>

</html>

Answer 2

To determine the direction in which the user is scrolling, follow these steps:

Begin by initializing a counter outside of any function (start)
```
let start = 0;
```

Bind the window object to the scroll event

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

Then, calculate the distance between the top of the viewport and the top of the <body> (stop)
```
const bcr = document.body.getBoundingClientRect();
const stop = bcr.top;
```
Upon firing the scroll event, compare the values of start and stop. If start is greater than stop, it means the user is scrolling down.
```
if (stop < start) {//...
```
Once this condition is met, unbind the video from the timeupdate event and resume playing the video using .play()
```
video.play();
video.removeEventListener('timeupdate', first5Sec);
```

Note: The only way to remove an event listener is to ensure that both .addEventListener() and .removeEventListener() match in terms of the element they are bound to and their respective parameters.

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

Make sure not to take any action until the video is paused, then proceed to scroll down

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

video.addEventListener("timeupdate", first5Sec);

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

// Bind window to the scroll event
window.addEventListener('scroll', function() {
  // Get the BCR of <body>
  const bcr = document.body.getBoundingClientRect();
  /*
  Calculate the distance from the top of the viewport to the top of the body
  */
  const stop = bcr.top;
  /*
  If the distance is less than the start, play the video
  */
  if (stop < start) {
    video.play();
    /*
    Unbind the video from the 'timeupdate' event. Both .addEventListener() and
    .removeEventListener() must have identical parameters
    */
    video.removeEventListener('timeupdate', first5Sec);
  }
  // Set stop as the new start 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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
  <section>
    <figure>
      <video src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" preload autoplay muted></video>
    </figure>
  </section>

</body>

</html>

Deactivate the EventListener to continue playing the video

Answer №1

Similar questions

What is the best method for selecting or isolating the code for a single animation created using JavaScript?

Managing multiple checkboxes in a Vue component

Utilize AngularJS to loop through a list with ng-repeat

Can functions be used as keys in a collection in JavaScript's map?

Enable next-i18next to handle internationalization, export all pages with next export, and ensure that 404 error pages are displayed on non-generated pages

Regular Expression to Replace Characters Not Matching

Utilizing JSON data for efficient React component rendering

What is causing the Jquery form submit event to not trigger?

Applying CSS styles to a class dynamically using JavaScript

"Troubleshooting: Child Component Not Reflecting Changes in UI Despite Using Angular

Webhost sending information to Windows sidebar gadget

Displaying AJAX Confirmation in a Popup Window

Difficulties with angular ui-router authentication problems

Encountering a '[BABEL] Cannot find module' error message after setting up a new PC

Require assistance in generating three replicas of an object rather than references as it currently operates

Mandate that users select from the available place autocomplete suggestions exclusively

react component fails to rerender upon state change

determine function output based on input type

Ensure Angular JS includes a space or special character after applying a currency filter

The POST request encountered an error with status code 500 while being processed by the Express.js framework in the IncomingMessage