Як визначити, чи відтворюється елемент <video>?

Question 1

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

Я знаю, що є playingподії, які запускаються, коли елемент починає відтворюватися, і timeupdateподії подій періодично під час відтворення, але я шукаю спосіб визначити, чи відтворюється відео зараз . Чи є простий спосіб це визначити?

Найближче, що у мене є:

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

Question 2

Це було давно, але ось чудова підказка. Ви можете визначити .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
}

Question 3

Не існує конкретного атрибута, який би вказував, чи MediaElementвідтворюється на даний момент. Однак ви можете визначити це із стану інших атрибутів. Якщо:

currentTime більше нуля, і
paused хибне, і
ended є хибним

тоді елемент зараз відтворюється.

Можливо, вам також доведеться перевірити, readyStateчи не зупинився носій через помилки. Може щось подібне:

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

Question 4

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

var videoElement = video.get(0);

if (!videoElement.paused) {}

Один із способів зробити це за допомогою Jquery

Question 5

Подивіться мою відповідь тут: Відео тег HTML5, javascript для виявлення стану відтворення?

В основному, як уже було сказано, немає жодної властивості для перевірки, але відповідно до специфікації це комбінація умов.

Question 6

Я стикався з тією ж проблемою. Рішення дуже просте і прямолінійне:

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

Question 7

ви можете перевірити наявність readyState, якщо воно рівне або більше HAVE_FUTURE_DATA і призупинено, є хибним. Це може підтвердити відтворення відео.

Як пояснюється в https://html.spec.whatwg.org/, подія відтворення буде запущена, коли: "readyState нещодавно дорівнює або перевищує HAVE_FUTURE_DATA, а призупинено - помилково, або призупинено - знову помилково, і readyState дорівнює або більше ніж HAVE_FUTURE_DATA "