web-dev-qa-db-fra.com

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

Je vois que l'interface MediaElement expose des attributs comme paused, seeking et ended. Il manque cependant dans la liste playing.

Je sais qu'il y a playing événements qui se déclenchent lorsqu'un élément commence à jouer, et timeupdate events événements périodiquement pendant la lecture, mais je cherche un moyen de déterminer si une vidéo est en cours de lecture en ce moment . Existe-t-il un moyen simple de déterminer cela?

Le plus proche que j'ai est:

!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)
javascripthtml5-video
65
Evan Krall

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

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> ou <audio> éléments comme celui-ci:

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

Il n'y a pas d'attribut spécifique qui révélera si un MediaElement est en cours de lecture. Cependant, vous pouvez le déduire de l'état des autres attributs. Si:

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

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

Vous devrez peut-être également vérifier readyState pour voir si le support s'est arrêté en raison d'erreurs. Peut-être quelque chose comme ça:

const isVideoPlaying = video => !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);
64
George Cummins
var video = $('selector').children('video');

var videoElement = video.get(0);

if (!videoElement.paused) {}

Une façon de le faire en utilisant Jquery

8
Luke Robertson

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

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

2
Variant