Detect if HTML5 Video element is playing [duplicate]

I’ve looked through a couple of questions to find out if an HTML5 element is playing, but can’t find the answer. I’ve looked at the W3 documentation and it has an event named “playing” but I can’t seem to get it to work.

This is my current code:

var stream = document.getElementsByTagName('video');

function pauseStream() {
  if (stream.playing) {
    for (var i = 0; i < stream.length; i++) {
      stream[i].pause();
      $("body > header").addClass("paused_note");
      $(".paused_note").text("Stream Paused");
      $('.paused_note').css("opacity", "1");
    }
  }
}

Answer

Note : This answer was given in 2011. Please check the updated documentation on HTML5 video before proceeding.

If you just want to know whether the video is paused, use the flag stream.paused.

There is no property for a video element in getting its playing status. But there is one event “playing” which will be triggered when it starts to play. An Event called “ended” is also triggered when it stops playing.

So the solution is:

1. Declare one variable videoStatus.
2. Add event handlers for different events of video.
3. Update videoStatus using the event handlers.
4. Use videoStatus to identify the status of the video.

This page will give you a better idea about video events. Play the video on this page and see how the events are triggered.
http://www.w3.org/2010/05/video/mediaevents.html