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('Мережа сповільнилася. Перевірте своє підключення.');
});
У цьому випадку при виникненні події користувачу буде показане сповіщення, що може допомогти швидше діагностувати проблему.
| Порада: | Подія |
| Порада: | Крім того, можна зберігати статистику кількості подій |
| Порада: | Пам'ятайте, що подія |
Синтаксис
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);
});