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

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

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

При відтворенні медіафайлу, браузер постійно завантажує фрагменти контенту для безперервного програвання. Якщо цей процес зупиняється або не вдається отримати наступну частину даних, виникає подія stalled. Ця подія дозволяє розробникам реагувати на проблеми з завантаженням медіаданих, наприклад, показувати користувачу індикатор завантаження або попередження про погану якість інтернет-з’єднання.

Наприклад:

const video = document.querySelector('video');

video.addEventListener('stalled', function() {
  console.log('Завантаження медіаданих призупинено.');
});

У цьому прикладі подія stalled спрацьовує, коли завантаження відео припиняється, і в консоль виводиться повідомлення. Це може бути корисним у додатках, де важливо своєчасно повідомляти користувачів про можливі проблеми з відтворенням.

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

Ще один приклад:

video.addEventListener('stalled', function() {
  alert('Мережа сповільнилася. Перевірте своє підключення.');
});

У цьому випадку при виникненні події користувачу буде показане сповіщення, що може допомогти швидше діагностувати проблему.

правити

Порада

Подія stalled може часто спрацьовувати при нестабільному інтернет-з'єднанні або на мобільних пристроях із слабким сигналом. Це слід враховувати при розробці відеоплеєрів, щоб не перевантажувати користувача постійними попередженнями.

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

Порада

Крім того, можна зберігати статистику кількості подій stalled, щоб відстежувати проблеми з відтворенням на різних типах з'єднань і оптимізувати контент або інтерфейс на основі цієї інформації.

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

Порада

Пам'ятайте, що подія stalled може спрацьовувати навіть при короткочасних проблемах із мережею. Це не завжди означає серйозну проблему, тому додаткові умови для реакції можуть бути корисними, наприклад, коли stalled триває певний час.

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

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

Синтаксис

element.addEventListener('stalled', function(event) {
  // код обробки події
});

Переглядачі

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

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

Переглядач
	3	3.5	3.1	10.5	12	9

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

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

Приклади

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

<div id="status">Завантаження ще не починалося</div>
<video id="clip" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>
<p><button id="stallButton">Імітувати зупинку мережі</button></p>

const video = document.getElementById('clip');
const statusDisplay = document.querySelector('#status');

video.addEventListener('stalled', function() {
  statusDisplay.textContent = 'Проблеми із завантаженням... Перевірте підключення.';
});

video.addEventListener('progress', function() {
  statusDisplay.textContent = 'Завантаження триває.';
});

video.src = silentWav(30);

// Мережу в прикладі не обірвати, тож подію надсилаємо самі — обробник той самий
document.getElementById('stallButton').addEventListener('click', function() {
  video.dispatchEvent(new Event('stalled'));
});

// — службове: беззвучний 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="clip" width="320" height="180" controls muted poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>
<p><button id="stallButton">Імітувати зупинку мережі</button></p>

const video = document.getElementById('clip');

video.addEventListener('stalled', function() {
  console.log('Виникли проблеми із завантаженням. Спроба перезавантаження...');
  setTimeout(() => {
    video.load(); // Перезавантажуємо відео після 5 секунд
    video.play().catch(error => console.log(`Автозапуск заборонено (${error.name})`));
  }, 5000);
});

video.src = silentWav(30);

// Мережу в прикладі не обірвати, тож подію надсилаємо самі — обробник той самий
document.getElementById('stallButton').addEventListener('click', function() {
  video.dispatchEvent(new Event('stalled'));
});

// — службове: беззвучний 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))}`;
}