Comment savoir si un élément <video> est en cours de lecture ?

Question

Je constate que le Élément de média L'interface expose des attributs tels que paused , seeking et ended . Il manque toutefois à cette liste playing .

Je sais qu'il y a playing événements qui s'enflamme lorsqu'un élément commence jouer, et timeupdate événements périodiquement pendant la lecture, mais je cherche un moyen de déterminer si une vidéo est en cours de lecture. dès maintenant . Existe-t-il un moyen simple de le déterminer ?

Le plus proche que j'ai est :

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

Answer 1

Il n'existe pas d'attribut spécifique qui permette de savoir si une MediaElement est actuellement à l'affiche. Cependant, vous pouvez le déduire de l'état des autres attributs. Si :

• currentTime est supérieur à zéro, et
• paused est fausse, et
• ended est faux

l'élément est en cours de lecture.

Il peut également être nécessaire de vérifier readyState pour voir si le support s'est arrêté en raison d'erreurs. Il y a peut-être quelque chose de ce genre :

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

Answer 2

Cela fait longtemps, mais voici un bon conseil. Vous pouvez définir .playing en tant que propriété personnalisée pour tous les éléments multimédias et y accéder en cas de besoin. Voici comment procéder :

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

Vous pouvez maintenant l'utiliser sur <video> o <audio> des éléments comme celui-ci :

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

Answer 3

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

var videoElement = video.get(0);

if (!videoElement.paused) {} 

Une façon de le faire en utilisant Jquery

Answer 4

Voir ma réponse ici : Balise vidéo HTML5, javascript pour détecter l'état de la lecture ?

Fondamentalement, comme indiqué précédemment, il n'y a pas de propriété unique à vérifier, mais selon les spécifications, il s'agit d'une combinaison de conditions.

Answer 5

J'ai rencontré le même problème. La solution est très simple et directe :

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