¿Cómo saber si se está reproduciendo un elemento <video>?

Veo que los MediaElement expone la interfaz de atributos como paused, seeking, y ended. Sin embargo, falta en la lista playing.

Sé que hay playingeventos que se activan cuando un elemento comienza a reproducirse y timeupdateeventos de eventos periódicamente durante la reproducción, pero estoy buscando una manera de determinar si un video se está reproduciendo en este momento . ¿Existe una manera fácil de determinar esto?

Lo más cercano que tengo es:

!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)

Ha pasado mucho tiempo, pero aquí hay un gran consejo. Puede definir .playingcomo una propiedad personalizada para todos los elementos multimedia y acceder a ella cuando sea necesario. Aquí es cómo:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})

Ahora puedes usarlo en <video>o <audio>elementos como esto:

if(document.querySelector('video').playing){ // checks if element is playing right now
    // Do anything you want to
}

No hay un atributo específico que revele si MediaElementse está reproduciendo actualmente. Sin embargo, puede deducir esto del estado de los otros atributos. Si:

• currentTime es mayor que cero, y
• paused es falso, y
• ended Es falso

entonces el elemento se está reproduciendo actualmente.

También es posible que deba verificar readyStatesi el medio se detuvo debido a errores. Quizás algo así:

const isVideoPlaying = video => !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);

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

var videoElement = video.get(0);

if (!videoElement.paused) {} 

Una forma de hacerlo usando Jquery

Vea mi respuesta aquí: etiqueta de video HTML5, javascript para detectar el estado de reproducción?

Básicamente, como se dijo antes, no hay una propiedad única para verificar, pero de acuerdo con la especificación, es una combinación de condiciones.

Estaba enfrentando el mismo problema. La solución es muy simple y directa:

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