JS властивість Event.pause

Загальний опис

Подія pause виникає тоді, коли відтворення медіафайлу (аудіо або відео) призупиняється, незалежно від того, чи було це зроблено користувачем, чи програмно через виклик методу pause(). Ця подія є важливою для того, щоб відстежувати, коли медіа на веб-сторінці зупиняється, і може бути корисною для додаткових дій, таких як збереження позиції відтворення, показ повідомлення або зміна елементів інтерфейсу.

Подія pause спрацьовує на елементах audio та video, а також на інших елементах з медіаконтентом, які підтримують відтворення. Наприклад, у випадку відеоплеєра ви можете відслідковувати момент, коли користувач ставить відео на паузу, і виконувати додаткові дії, як-от надсилання аналітичних даних або відображення пропозицій для продовження перегляду.

Ось базовий приклад використання:

const video = document.getElementById('myVideo');
video.addEventListener('pause', function() {
  console.log('Відео призупинено.');
});

У цьому прикладі, коли відео призупиняється, виводиться повідомлення в консоль, що відео зупинено. Це може бути корисним для реалізації складніших сценаріїв, наприклад, для запису точного часу, на якому було зупинено відео, щоб відновити його пізніше з тієї ж позиції.

Подія pause не викликається автоматично, якщо відтворення медіа завершилося, тобто якщо відео або аудіо просто доходить до кінця. У таких випадках використовують подію ended. Отже, подія pause корисна саме тоді, коли необхідно відстежити тимчасову паузу в медіавідтворенні.

Ця подія також не має властивостей, які б додатково передавали інформацію про причини паузи, але її можна використовувати разом з іншими подіями, такими як play та ended, щоб мати повний контроль над медіаконтентом на сторінці.

правити

Порада

Використовуйте pause для збереження поточної позиції відтворення, щоб користувач міг відновити перегляд з того ж моменту після перезавантаження сторінки. Це можна зробити через метод video.currentTime.

автор: Bond правити

Порада

Для інтерактивних елементів управління, таких як показ повідомлення або кнопки "Продовжити", подія pause може допомогти вчасно активувати ці елементи, коли користувач зупиняє медіафайл.

автор: Bond правити

Порада

Якщо ви хочете автоматично запустити рекламу або показати спеціальну пропозицію під час паузи, подія pause може бути ідеальним тригером для таких дій, наприклад, показ банера або модального вікна.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

const video = document.getElementById('myVideo');
video.addEventListener('pause', function() {
  localStorage.setItem('videoPausedTime', video.currentTime);
});

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

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'; // Ховаємо банер при відновленні відео
});