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) {
  // код обробки події
});

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

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

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

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

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

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