Wie kann man feststellen, ob gerade ein <video> -Element abgespielt wird?

Ich sehe , dass die Media Schnittstelle Exposes Attribute wie paused, seekingund ended. In der Liste fehlt jedoch playing.

Ich weiß , es gibt playingEreignisse , dass Feuer , wenn ein Element beginnt zu spielen und timeupdateEreignisse Ereignisse in regelmäßigen Abständen während des Spiels, aber ich bin nach einem Weg suchen , um zu bestimmen , ob ein Video abgespielt werden jetzt . Gibt es eine einfache Möglichkeit, dies festzustellen?

Das nächste, was ich habe, ist:

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

Es ist lange her, aber hier ist ein toller Tipp. Sie können .playingeine benutzerdefinierte Eigenschaft für alle Medienelemente definieren und bei Bedarf darauf zugreifen. Hier ist, wie:

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

Jetzt können Sie es für <video>oder <audio>Elemente wie dieses verwenden:

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

Es gibt kein bestimmtes Attribut, das angibt, ob a MediaElementgerade spielt. Sie können dies jedoch aus dem Status der anderen Attribute ableiten. Wenn:

• currentTime ist größer als Null und
• paused ist falsch und
• ended ist falsch

dann spielt das Element gerade.

Möglicherweise müssen Sie auch überprüfen readyState, ob das Medium aufgrund von Fehlern gestoppt wurde. Vielleicht so etwas:

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) {} 

Eine Möglichkeit, dies mit Jquery zu tun

Siehe meine Antwort hier: HTML5-Video-Tag, Javascript zur Erkennung des Spielstatus?

Grundsätzlich gibt es, wie bereits erwähnt, keine einzige zu überprüfende Eigenschaft, aber gemäß der Spezifikation handelt es sich um eine Kombination von Bedingungen.

Ich hatte das gleiche Problem. Die Lösung ist sehr einfach und unkompliziert:

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