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 допомагає ефективно керувати медіа контентом і забезпечувати користувачу зворотній зв’язок у випадку затримок завантаження або проблем із мережею.
| Порада: | Коли спрацьовує подія |
| Порада: | Інколи медіа елемент може залишатися в стані очікування через постійні проблеми з мережею. У таких випадках варто додати тайм-аут або повідомлення про перевищений час очікування, щоб користувач розумів, що проблема не тимчасова. |
| Порада: | Подію |
Синтаксис
element.addEventListener('waiting', function(event) {
// Дії при призупиненні відтворення для завантаження даних
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад показує, як відображати індикатор завантаження, коли відео призупиняється через відсутність даних, та автоматично приховувати його після відновлення відтворення. Це корисно для програвачів, де користувачу потрібно надавати зворотній зв'язок у разі затримок завантаження.
const videoElement = document.querySelector('video');
const loader = document.getElementById('loader');
videoElement.addEventListener('waiting', () => {
loader.style.display = 'block';
console.log('Завантаження відео, будь ласка, зачекайте...');
});
videoElement.addEventListener('playing', () => {
loader.style.display = 'none';
});У цьому прикладі реалізовано тайм-аут, який показує користувачу сповіщення, якщо відео залишається в стані очікування більше ніж 5 секунд. Це корисно для обробки випадків, коли проблеми з мережею призводять до тривалих затримок завантаження, і користувач може вчасно отримати сповіщення про потенційні проблеми.
const videoElement = document.querySelector('video');
let timeoutId;
videoElement.addEventListener('waiting', () => {
timeoutId = setTimeout(() => {
alert('Відтворення призупинено на тривалий час. Перевірте з’єднання.');
}, 5000); // Сповіщення через 5 секунд
});
videoElement.addEventListener('playing', () => {
clearTimeout(timeoutId); // Скасування повідомлення, якщо відео відновилося
});