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

I see that the MediaElement interface exposes attributes like paused, seeking, and ended. Missing from the list, however, is playing.

I know there are playing events that fire when an element starts playing, and timeupdate events events periodically while playing, but I'm looking for a way to determine whether a video is playing right now. Is there an easy way to determine this?

The closest I've got is:

!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)

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

See my response here: https://stackoverflow.com/questions/6647168/html5-video-tag-javascript-to-detect-playing-status/6647216#6647216

Basicaly, as said before there is no single property to check but according to the spec it's a combination of conditions.

I was facing the same problem. Solution is very simple and straight forward:

// if video status is changed to "ended", then change control button to "Play Again"
video.onended = function() {
	$("#play_control_button").text("Play Again");
};

// if video status is changed to "paused", then change control button to "Continue Play"
video.onpause = function() {
	$("#play_control_button").text("Continue Play");
};

// if video status is changed to "playing", then change control button to "Stop"
video.onplaying = function() {
	$("#play_control_button").text("Stop");
};

var vid = document.getElementById("myVideo");
vid.onplaying = function() {
alert("The video is now playing");};

you can use this see this

you could check for the readyState if its equal or greater than HAVE_FUTURE_DATA and paused is false. This could confirm that video is playing.

As its explained in https://html.spec.whatwg.org/ playing event will be fired when: "readyState is newly equal to or greater than HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than HAVE_FUTURE_DATA"