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

85

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

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

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

!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)
Эван Кролл
источник

Ответы:

89

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

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

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

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

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

const isVideoPlaying = video => !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);
Джордж Камминс
источник
Это предположение не выполняется в IE. Пока пользователь ищет (а видео, таким образом, сейчас не воспроизводится), currentTime может быть больше 0 и одновременно paused = finished = false.
Bjarke
currentTime дает мне продолжительность видео в секундах в виде числа с плавающей точкой в ​​Safari, если видео еще не началось.
Q Caron
10
var video = $('selector').children('video');

var videoElement = video.get(0);

if (!videoElement.paused) {} 

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

Люк Робертсон
источник
Это лучший способ. Acc
One
1

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

// 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");
};
Хаолинь Чжан
источник
Можете ли вы дать ссылку на документацию по этим свойствам?
brasofilo
@brasofilo Я думаю, что приведенная ниже ссылка предоставит достаточно информации для управления видео с помощью JavaScript: w3schools.com/tags/ref_av_dom.asp
Чжан