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

Viewed 121118

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

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"

Related