How to tell if a <video> element is currently playing?
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, andpaused
is false, andended
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