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

85

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)
Evan Krall
źródło

Odpowiedzi:

89

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
}
Raees Iqbal
źródło
86

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);
George Cummins
źródło
To założenie nie wydaje się obowiązywać w IE. Podczas gdy użytkownik szuka (a zatem wideo nie jest teraz odtwarzane), currentTime może być większy niż 0 i jednocześnie paused = ended = false.
Bjarke
currentTime podaje czas trwania wideo w sekundach jako liczbę zmiennoprzecinkową w Safari, jeśli wideo jeszcze się nie rozpoczęło.
Q Caron
10
var video = $('selector').children('video');

var videoElement = video.get(0);

if (!videoElement.paused) {} 

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

Luke Robertson
źródło
To najlepszy sposób. Acc jeden jest zbyt uciążliwy
Bariq Dharmawan
1

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");
};
Haolin Zhang
źródło
Czy możesz podać link do dokumentacji tych nieruchomości?
brasofilo
@brasofilo Myślę, że poniższy link dostarczy wystarczających informacji do kontrolowania wideo za pomocą JavaScript: w3schools.com/tags/ref_av_dom.asp
Haolin Zhang