How to tell if a

Question

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)

score 139 · Answer 1 · edited Jul 08 '19 at 13:28

139

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

edited Jul 08 '19 at 13:28

Mladen Ilić

1,667
1
17
21

answered Jul 29 '11 at 18:37

George Cummins

28,485
8
71
90

This assumption does not seem to hold in IE. While the user is seeking (and the video is thus not playing right now), currentTime can be greater than 0 and paused = ended = false at the same time. – DisplayName Aug 20 '15 at 16:48
1

currentTime gives me the video duration in seconds as a float in Safari if video has not started playing yet. – Q Caron Sep 30 '15 at 12:40
1

Its sad such a property isn't built to the spec!! – Jikku Jose Nov 11 '21 at 10:30

Raees Iqbal · Answer 2 · 2015-10-09T08:58:13.343

123

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
}

edited Oct 09 '15 at 08:58

answered Jun 30 '15 at 08:36

Raees Iqbal

2,160
1
18
15

1

This is freaking awesome. Works for both video and audio! – Kalaschnik Mar 23 '23 at 15:01

score 18 · Answer 3 · answered Jan 31 '13 at 09:14

18

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

var videoElement = video.get(0);

if (!videoElement.paused) {}

One way of doing it using Jquery

answered Jan 31 '13 at 09:14

Luke Robertson

1,592
16
21

This is the best way. Acc one is too cumbersome – Bariq Dharmawan Dec 10 '20 at 11:53

score 2 · Answer 4 · edited Oct 23 '19 at 19:49

2

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

edited Oct 23 '19 at 19:49

brasofilo

25,496
15
91
179

answered Oct 23 '19 at 19:38

Haolin Zhang

67
5

Can you link to the documentation of these properties? – brasofilo Oct 23 '19 at 19:50
@brasofilo I think the below link will provide enough information for controlling video with JavaScript: https://www.w3schools.com/tags/ref_av_dom.asp – Haolin Zhang Oct 24 '19 at 15:19

score 2 · Answer 5 · answered Jul 09 '21 at 08:48

2

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

you can use this see this

answered Jul 09 '21 at 08:48

user9106349

21
1

score 2 · Answer 6 · edited May 23 '17 at 11:54

2

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.

edited May 23 '17 at 11:54

Community

1
1

answered Jul 30 '11 at 06:57

Variant

17,279
4
40
65

score 1 · Answer 7 · answered Jan 12 '21 at 05:16

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"

score -1 · Answer 8 · answered Jun 14 '23 at 12:18

Here is a simple code for the Play/Pause button:

playpause.addEventListener("click", (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

Source: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player

How to tell if a

8 Answers8

Linked

Related

How to tell if a element is currently playing?

8 Answers8

Linked

Related

How to tell if a