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` може часто спрацьовувати при нестабільному інтернет-з'єднанні або на мобільних пристроях із слабким сигналом. Це слід враховувати при розробці відеоплеєрів, щоб не перевантажувати користувача постійними попередженнями.
Порада:	Крім того, можна зберігати статистику кількості подій `stalled`, щоб відстежувати проблеми з відтворенням на різних типах з'єднань і оптимізувати контент або інтерфейс на основі цієї інформації.
Порада:	Пам'ятайте, що подія `stalled` може спрацьовувати навіть при короткочасних проблемах із мережею. Це не завжди означає серйозну проблему, тому додаткові умови для реакції можуть бути корисними, наприклад, коли `stalled` триває певний час.

Синтаксис

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

Значення

Return

Переглядачі

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

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

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

У цьому прикладі, коли спрацьовує подія stalled, користувачу показується повідомлення про можливі проблеми із з'єднанням. Як тільки завантаження відновлюється (подія progress), повідомлення оновлюється на "Завантаження триває", що допомагає зберігати користувача в курсі стану відтворення.

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

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

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

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

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

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

JS довідник

Events

JavaScript

Statements