JS властивість Event.pause
Загальний опис
Подія pause виникає тоді, коли відтворення медіафайлу (аудіо або відео) призупиняється, незалежно від того, чи було це зроблено користувачем, чи програмно через виклик методу pause(). Ця подія є важливою для того, щоб відстежувати, коли медіа на веб-сторінці зупиняється, і може бути корисною для додаткових дій, таких як збереження позиції відтворення, показ повідомлення або зміна елементів інтерфейсу.
Подія pause спрацьовує на елементах audio та video, а також на інших елементах з медіаконтентом, які підтримують відтворення. Наприклад, у випадку відеоплеєра ви можете відслідковувати момент, коли користувач ставить відео на паузу, і виконувати додаткові дії, як-от надсилання аналітичних даних або відображення пропозицій для продовження перегляду.
Ось базовий приклад використання:
const video = document.getElementById('myVideo');
video.addEventListener('pause', function() {
console.log('Відео призупинено.');
});
У цьому прикладі, коли відео призупиняється, виводиться повідомлення в консоль, що відео зупинено. Це може бути корисним для реалізації складніших сценаріїв, наприклад, для запису точного часу, на якому було зупинено відео, щоб відновити його пізніше з тієї ж позиції.
Подія pause не викликається автоматично, якщо відтворення медіа завершилося, тобто якщо відео або аудіо просто доходить до кінця. У таких випадках використовують подію ended. Отже, подія pause корисна саме тоді, коли необхідно відстежити тимчасову паузу в медіавідтворенні.
Ця подія також не має властивостей, які б додатково передавали інформацію про причини паузи, але її можна використовувати разом з іншими подіями, такими як play та ended, щоб мати повний контроль над медіаконтентом на сторінці.
| Порада: | Використовуйте |
| Порада: | Для інтерактивних елементів управління, таких як показ повідомлення або кнопки "Продовжити", подія |
| Порада: | Якщо ви хочете автоматично запустити рекламу або показати спеціальну пропозицію під час паузи, подія |
Синтаксис
element.addEventListener('pause', function(event) {
// код для обробки події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад показує, як використовувати подію pause для показу користувачеві повідомлення під час зупинки відтворення відео. Під час паузи з'являється інформаційне повідомлення з кнопкою, яка дозволяє приховати його. Якщо користувач продовжить перегляд відео, повідомлення автоматично ховається. Це корисний спосіб інформувати користувачів або взаємодіяти з ними під час зупинки медіаконтенту.
У цьому прикладі подія pause використовується для збереження часу зупинки відео в localStorage. Це дозволяє відновити перегляд відео з того ж моменту, де його було зупинено, після повторного завантаження сторінки або пізнішого відвідування.
const video = document.getElementById('myVideo');
video.addEventListener('pause', function() {
localStorage.setItem('videoPausedTime', video.currentTime);
});Цей приклад демонструє, як можна показувати рекламний банер під час паузи відео та ховати його, коли відтворення продовжується. Це корисний сценарій для інтеграції реклами або додаткових повідомлень під час зупинки відеоконтенту.
const video = document.getElementById('myVideo');
video.addEventListener('pause', function() {
const adBanner = document.getElementById('adBanner');
adBanner.style.display = 'block'; // Показуємо рекламний банер
});
video.addEventListener('play', function() {
const adBanner = document.getElementById('adBanner');
adBanner.style.display = 'none'; // Ховаємо банер при відновленні відео
});