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) {
  // Дії при призупиненні відтворення для завантаження даних
});

Переглядачі

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

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

Переглядач
	3	6	3.1	≤12.1	12	9

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

Переглядач
	4.4	18	6	3

Приклади

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

<p><button id="playBtn">Відтворити</button></p>
<div id="loader" style="display: none;">Завантаження…</div>
<video id="videoElement" width="320" height="180" controls preload="none" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>

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

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

videoElement.addEventListener('playing', () => {
  loader.style.display = 'none';
  console.log('Даних вистачає — відтворення почалося');
});

videoElement.src = silentWav(30);

document.getElementById('playBtn').addEventListener('click', () => videoElement.play());

// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
  const size = seconds * rate;  // 8-бітний моно PCM: один байт на семпл
  const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
  const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;

  return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}

<video id="videoElement" width="320" height="180" controls preload="none" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>
<p><button id="playBtn">Відтворити</button></p>

const videoElement = document.getElementById('videoElement');
let timeoutId;

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

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

videoElement.src = silentWav(30);

document.getElementById('playBtn').addEventListener('click', () => videoElement.play());

// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
  const size = seconds * rate;  // 8-бітний моно PCM: один байт на семпл
  const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
  const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;

  return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}