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

85

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)
Evan Krall
quelle

Antworten:

88

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
}
Raees Iqbal
quelle
84

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);
George Cummins
quelle
Diese Annahme scheint im IE nicht zu gelten. Während der Benutzer sucht (und das Video gerade nicht abgespielt wird), kann currentTime größer als 0 sein und gleichzeitig pausiert = beendet = falsch.
Bjarke
currentTime gibt mir die Videodauer in Sekunden als Float in Safari an, wenn das Video noch nicht abgespielt wurde.
Q Caron
10
var video = $('selector').children('video');

var videoElement = video.get(0);

if (!videoElement.paused) {} 

Eine Möglichkeit, dies mit Jquery zu tun

Luke Robertson
quelle
Dies ist der beste Weg. Acc man ist zu umständlich
Bariq Dharmawan
2

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.

Variante
quelle
1

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");
};
Haolin Zhang
quelle
Können Sie auf die Dokumentation dieser Eigenschaften verlinken?
Brasofilo
@brasofilo Ich denke, der folgende Link bietet genügend Informationen für die Steuerung von Videos mit JavaScript: w3schools.com/tags/ref_av_dom.asp
Haolin Zhang