Как узнать, играет ли в данный момент элемент <video>?

Я вижу, что интерфейс MediaElement предоставляет такие атрибуты, как paused, seeking и ended. Однако в списке отсутствует playing.

Я знаю, что есть playing события, которые срабатывают при запуске элемента, и timeupdate события периодически во время игры, но я ищу способ определить, воспроизводится ли видео прямо сейчас. Есть ли простой способ определить это?

Ближайшее, что у меня есть, это:

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

Ответы

Ответ 1

Это было давно, но вот отличный совет. Вы можете определить .playing как настраиваемое свойство для всех элементов мультимедиа и получить доступ к нему, когда это необходимо. Вот как:

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

Теперь вы можете использовать его на элементах <video> или <audio>, например:

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

Ответ 2

Не существует определенного атрибута, который бы MediaElement воспроизводится ли MediaElement в данный момент. Однако вы можете вывести это из состояния других атрибутов. Если:

  • currentTime больше нуля, и
  • paused ложна, и
  • ended ложь

тогда элемент в настоящее время играет.

Вам также может понадобиться проверить readyState чтобы увидеть, остановился ли носитель из-за ошибок. Может быть что-то подобное:

const isVideoPlaying = video => !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);

Ответ 3

var video = $('selector').children('video');

var videoElement = video.get(0);

if (!videoElement.paused) {}

Один из способов сделать это с помощью JQuery