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)

Solution 1:

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);

Solution 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
}

Solution 3:

var video = $('selector').children('video');

var videoElement = video.get(0);

if (!videoElement.paused) {}

One way of doing it using Jquery

Solution 4:

See my response here: HTML5 video tag, javascript to detect playing status?

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

Solution 5:

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");
};