Categories
JavaScript Answers

How to Detect if an HTML5 Video Element is Playing with JavaScript?

Spread the love

To detect if an HTML5 video element is playing with JavaScript, we can listen to various events emitted by the HTML5 video element.

To do this, we can add the video element with the following HTML:

<div id="output"></div>
<video id="myVideo" width="320" height="176" controls autoplay>
  <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
</video>

to add a div to show some text when various events are triggered.

Then we add a video element with the video.

Next, we add the following JavaScript code to listen to video player events and set the div content according to the event triggered:

const media = document.getElementById('myVideo');
const output = document.getElementById('output');

media.addEventListener("playing", () => {
  output.innerHTML = "Playing event triggered";
});

media.addEventListener("pause", () => {
  output.innerHTML = "Pause event triggered";
});

media.addEventListener("seeking", () => {
  output.innerHTML = "Seeking event triggered";
});

media.addEventListener("volumechange", () => {
  output.innerHTML = "Volumechange event triggered";
});

We get the video and div elements with document.getElementById .

Then we call addEventListener on the video player to listen to various events emitted by it.

The 'playing' event is emitted when the video is playing.

The 'pause' event is emitted when the video is paused.

The 'seeking' event is emitted when we’re moving the seek bar.

The 'volumechange' event is emitted when the video volume is changed.

In the event handlers, we set the innerHTML of the div to the content we want to display.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

One reply on “How to Detect if an HTML5 Video Element is Playing with JavaScript?”

Leave a Reply

Your email address will not be published.