JS властивість Event.waiting

Загальний опис

Подія waiting виникає, коли медіа елемент (аудіо або відео) тимчасово призупиняє відтворення через те, що не має достатньо даних для подальшого відтворення. Це трапляється, коли буфер медіа даних вичерпано, і браузер повинен завантажити додаткові частини для продовження відтворення.

Подію можна використовувати для інформування користувача про те, що відтворення призупинено через буферизацію або завантаження даних. Найчастіше це корисно для створення індикаторів завантаження, що дозволяють користувачу зрозуміти, що відео чи аудіо тимчасово не відтворюється, а знаходиться у стані очікування:

const videoElement = document.querySelector('video');
videoElement.addEventListener('waiting', () => {
  console.log('Відео призупинено, очікується завантаження...');
});

Подія waiting спрацьовує кожного разу, коли браузеру необхідно призупинити відтворення через відсутність необхідних даних. Вона також може повторно виникати під час тривалого відтворення, якщо мережа недостатньо швидка або з'являються інші затримки з передачею даних.

Для відновлення відтворення браузер може автоматично завантажити додаткові частини медіа, а після цього подія playing вказує на те, що відтворення продовжилося:

videoElement.addEventListener('playing', () => {
  console.log('Відео відновило відтворення.');
});

Якщо ви хочете додати анімацію завантаження, вона може бути показана в момент, коли спрацьовує waiting, і прихована при події playing:

const loader = document.getElementById('loader');
videoElement.addEventListener('waiting', () => {
  loader.style.display = 'block';  // Показуємо індикатор завантаження
});
videoElement.addEventListener('playing', () => {
  loader.style.display = 'none';  // Ховаємо індикатор
});

Таким чином, waiting допомагає ефективно керувати медіа контентом і забезпечувати користувачу зворотній зв’язок у випадку затримок завантаження або проблем із мережею.

правити

Порада

Коли спрацьовує подія waiting, важливо додати користувацький інтерфейс (UI), який дозволить швидко відновити відтворення, якщо користувач вирішить чекати довго. Наприклад, можна додати кнопку для перезапуску або перемикання якості відео.

автор: Bond правити

Порада

Інколи медіа елемент може залишатися в стані очікування через постійні проблеми з мережею. У таких випадках варто додати тайм-аут або повідомлення про перевищений час очікування, щоб користувач розумів, що проблема не тимчасова.

автор: Bond правити

Порада

Подію waiting можна використовувати для збору аналітики про якість з'єднання користувачів або для зміни налаштувань медіа потоків (наприклад, зниження якості відео при постійних затримках).

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('waiting', function(event) {
  // Дії при призупиненні відтворення для завантаження даних
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div id="loader">Демонстраційний елемент</div>
<video width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

const videoElement = document.querySelector('video');
const loader = document.getElementById('loader');

videoElement.addEventListener('waiting', () => {
  loader.style.display = 'block';
  console.log('Завантаження відео, будь ласка, зачекайте...');
});

videoElement.addEventListener('playing', () => {
  loader.style.display = 'none';
});

<video width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

const videoElement = document.querySelector('video');
let timeoutId;

videoElement.addEventListener('waiting', () => {
  timeoutId = setTimeout(() => {
    alert('Відтворення призупинено на тривалий час. Перевірте з’єднання.');
  }, 5000);  // Сповіщення через 5 секунд
});

videoElement.addEventListener('playing', () => {
  clearTimeout(timeoutId);  // Скасування повідомлення, якщо відео відновилося
});