How to tell if a <video> element is currently playing? How to tell if a <video> element is currently playing? javascript javascript

How to tell if a <video> element is currently playing?


There is not a specific attribute that will reveal whether a MediaElement is currently playing. However, you can deduce this from the state of the other attributes. If:

  • currentTime is greater than zero, and
  • paused is false, and
  • ended is false

then the element is currently playing.

You may also need to check readyState to see if the media stopped due to errors. Maybe something like that:

const isVideoPlaying = video => !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);


It has been a long time but here is a great tip. You can define .playing as a custom property for all media elements and access it when needed. Here is how:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {    get: function(){        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);    }})

Now you can use it on <video> or <audio> elements like this:

if(document.querySelector('video').playing){ // checks if element is playing right now    // Do anything you want to}


var video = $('selector').children('video');var videoElement = video.get(0);if (!videoElement.paused) {} 

One way of doing it using Jquery