Jak sprawdzić, czy element <video> jest obecnie odtwarzany?

Widzę, że MediaElement eksponuje atrybuty jak interfejs paused, seekingoraz ended. Brakuje jednak na liście playing.

Wiem, że są playingzdarzenia, które uruchamiają się, gdy element zaczyna się odtwarzać, oraz timeupdatezdarzenia okresowe podczas odtwarzania, ale szukam sposobu, aby określić, czy wideo jest teraz odtwarzane . Czy istnieje łatwy sposób, aby to ustalić?

Najbliższe, jakie mam, to:

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

Minęło dużo czasu, ale oto świetna wskazówka. Możesz zdefiniować .playingjako właściwość niestandardową dla wszystkich elementów multimedialnych i uzyskać do niej dostęp w razie potrzeby. Oto jak:

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

Teraz można go używać na <video>lub <audio>elementów, takich jak to:

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

Nie ma określonego atrybutu, który ujawniłby, czy MediaElementaktualnie gra. Możesz to jednak wywnioskować ze stanu innych atrybutów. Gdyby:

• currentTime jest większe od zera i
• paused jest fałszywe i
• ended to fałsz

to element jest aktualnie odtwarzany.

Konieczne może być również sprawdzenie, readyStateczy multimedia zatrzymały się z powodu błędów. Może coś takiego:

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

Jednym ze sposobów na zrobienie tego za pomocą Jquery

Zobacz moją odpowiedź tutaj: tag wideo HTML5, javascript do wykrywania stanu odtwarzania?

Zasadniczo, jak powiedziano wcześniej, nie ma jednej właściwości do sprawdzenia, ale zgodnie ze specyfikacją jest to kombinacja warunków.

Miałem ten sam problem. Rozwiązanie jest bardzo proste i nieskomplikowane:

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