Detect if HTML5 Video element is playing

html

event-listeners

video-api

real-time-monitoring

byNikita Barsukov·Jan 9, 2025

Determine if an HTML5 video is actively playing with just a glance at this simple condition check:

var video = document.getElementById('myVideo');

if (!video.paused && !video.ended) {
    console.log("Playing");
} else {
    console.log("Not playing");
}

With !video.paused, we ensure the video isn't paused, and with !video.ended, we confirm that it hasn't finished. Together, they reveal whether the video is currently in the playing stage.

Real-time monitoring with event listeners

HTML5 video elements fire media events which we can capture and interpret in real-time. Here is how you attach these event listeners:

var video = document.querySelector('video'); // Sherlock Holmes level of specificity

video.addEventListener('playing', function() {
  console.log('Video started playing. Popcorn time! 🍿');
});

video.addEventListener('pause', function() {
  console.log('Video paused. Bathroom break! 🚽');
});

video.addEventListener('ended', function() {
  console.log('Video ended. More popcorn needed. 🍿🍿');
});

These events are extremely helpful in real-time feedback and enabling specific actions upon these changes.

Enhancing detection with custom properties

Creating custom properties or methods can make our API more instinctual. For instance, you can define an isPlaying property for every HTMLMediaElement:

Object.defineProperty(HTMLMediaElement.prototype, 'isPlaying', {
  get: function() {
    return !this.paused && !this.ended && this.readyState > 2;
    // More complex, yet robust. Like our relationship with coffee. ☕️
  }
});

// Usage:
if (video.isPlaying) {
  console.log('Video is playing');
}

The property readyState > 2 assures us that the video is more than just unpaused; it's fully playable and in the playing state.

Making your life easier with jQuery

Why do things the hard way when you can make it easy with jQuery? It makes binding event handlers and DOM manipulation as easy as a pie:

$('video').on('play', function() {
  console.log('Video has hit the play button. Fasten your seatbelts.');
}).on('pause', function() {
  console.log('Video has been paused. Snack refill anyone?');
});

With jQuery's event delegation, managing video elements within dynamic content need not be a tough nut to crack anymore.

The taste of user interactivity with visual clues

Offer visual indicators to users when the video's state changes:

video.addEventListener('pause', function() {
  document.getElementById('header').classList.add('paused_note');
  // Showing a distinct pause note. For once, be assertive!
});

video.addEventListener('playing', function() {
  document.getElementById('header').classList.remove('paused_note');
  // Removing that disturbing pause note. No nagging, please!
});

By managing the addition and removal of the paused_note class, you give the users an immediate signal regarding the video's current state.

Edge cases and precautions

Despite how solid your detection method is, be aware of these potential edge cases:

Multiple videos: For the pages with multiple video elements, use document.querySelectorAll('video') and loop over to check individual video status.
Dynamic Content: In single-page applications (SPAs) or dynamically loaded content, ensure your event listeners are properly attached to video elements by using event delegation or Mutation Observers.
State Management: Use a variable reflecting the latest state of video playback, updated by event handlers, rather than continuously querying the DOM.
Cross-Browser Compatibility: While most common browsers support HTML5 video API, always verify compatibility and have fallbacks for older browsers ready.