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

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

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

Самое близкое, что у меня есть:

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

Прошло много времени, но вот отличный совет. Вы можете определить .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
}

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

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

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

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

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

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

Смотрите мой ответ здесь: видеотег HTML5, JavaScript для определения статуса воспроизведения?

В основном, как было сказано ранее, нет единого свойства для проверки, но согласно спецификации это комбинация условий.

Я столкнулся с той же проблемой. Решение очень простое и понятное:

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