JS властивість Event.pause
Загальний опис
Подія pause виникає тоді, коли відтворення медіафайлу (аудіо або відео) призупиняється, незалежно від того, чи було це зроблено користувачем, чи програмно через виклик методу pause(). Ця подія є важливою для того, щоб відстежувати, коли медіа на веб-сторінці зупиняється, і може бути корисною для додаткових дій, таких як збереження позиції відтворення, показ повідомлення або зміна елементів інтерфейсу.
Подія pause спрацьовує на елементах audio та video, а також на інших елементах з медіаконтентом, які підтримують відтворення. Наприклад, у випадку відеоплеєра ви можете відслідковувати момент, коли користувач ставить відео на паузу, і виконувати додаткові дії, як-от надсилання аналітичних даних або відображення пропозицій для продовження перегляду.
Ось базовий приклад використання:
const video = document.getElementById('myVideo');
video.addEventListener('pause', function() {
console.log('Відео призупинено.');
});
У цьому прикладі, коли відео призупиняється, виводиться повідомлення в консоль, що відео зупинено. Це може бути корисним для реалізації складніших сценаріїв, наприклад, для запису точного часу, на якому було зупинено відео, щоб відновити його пізніше з тієї ж позиції.
Подія pause не викликається автоматично, якщо відтворення медіа завершилося, тобто якщо відео або аудіо просто доходить до кінця. У таких випадках використовують подію ended. Отже, подія pause корисна саме тоді, коли необхідно відстежити тимчасову паузу в медіавідтворенні.
Ця подія також не має властивостей, які б додатково передавали інформацію про причини паузи, але її можна використовувати разом з іншими подіями, такими як play та ended, щоб мати повний контроль над медіаконтентом на сторінці.
- Порада
-
Використовуйте
автор: Bondpauseдля збереження поточної позиції відтворення, щоб користувач міг відновити перегляд з того ж моменту після перезавантаження сторінки. Це можна зробити через методvideo.currentTime. - Порада
-
Для інтерактивних елементів управління, таких як показ повідомлення або кнопки "Продовжити", подія
автор: Bondpauseможе допомогти вчасно активувати ці елементи, коли користувач зупиняє медіафайл. - Порада
-
Якщо ви хочете автоматично запустити рекламу або показати спеціальну пропозицію під час паузи, подія
автор: Bondpauseможе бути ідеальним тригером для таких дій, наприклад, показ банера або модального вікна.
Синтаксис
element.addEventListener('pause', function(event) {
// код для обробки події
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 66 | 57 | 11.1 | 53 | 16 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 66 | 66 | 57 | 11.3 |
| Переглядач |  |
 |
|---|---|---|
| 15.0.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<header>
<h2 class="title">pause</h2>
<p class="description">Демонструє використання події pause у відеоплеєрі для показу повідомлень.</p>
</header>
<main>
<div class="result">
<video id="videoPlayer" width="600" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не підтримує відео.
</video>
<div class="own-controls">
<button id="startBtn">Відтворити</button>
<button id="stopBtn">Пауза</button>
</div>
<div id="pauseMessage" style="display: none; margin-top: 20px;">
<p>Відео зупинено. Натисніть кнопку, щоб приховати повідомлення або відновіть відтворення.</p>
<button id="hideMessageBtn">Сховати повідомлення</button>
</div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
button {
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}JS
const videoPlayer = document.getElementById('videoPlayer');
const pauseMessage = document.getElementById('pauseMessage');
const hideMessageBtn = document.getElementById('hideMessageBtn');
// Відображення повідомлення при паузі відео
videoPlayer.addEventListener('pause', function () {
pauseMessage.style.display = 'block'; // Показуємо повідомлення
});
// Сховати повідомлення за допомогою кнопки
hideMessageBtn.addEventListener('click', function () {
pauseMessage.style.display = 'none'; // Ховаємо повідомлення
});
// Автоматично ховати повідомлення при відновленні відео
videoPlayer.addEventListener('play', function () {
pauseMessage.style.display = 'none'; // Ховаємо повідомлення при відтворенні
});
// Власні кнопки керування — поруч із вбудованими кнопками браузера
document.getElementById('startBtn').addEventListener('click', () => videoPlayer.play());
document.getElementById('stopBtn').addEventListener('click', () => videoPlayer.pause());
videoPlayer.src = silentWav(20);
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<video id="myVideo" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>
<p><button id="playBtn">Відтворити</button> <button id="pauseBtn">Пауза</button></p>
<div id="adBanner" style="display: none;">Тут була б реклама</div>JS
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'; // Ховаємо банер при відновленні відео
});
// Власні кнопки керування — поруч із вбудованими кнопками браузера
document.getElementById('playBtn').addEventListener('click', () => video.play());
document.getElementById('pauseBtn').addEventListener('click', () => video.pause());
video.src = silentWav(20);
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<video id="myVideo" width="320" height="180" controls muted poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>
<p><button id="pauseBtn">Пауза</button></p>
<p id="resumeInfo">Час зупинки ще не збережено</p>JS
const video = document.getElementById('myVideo');
const info = document.getElementById('resumeInfo');
video.addEventListener('pause', function() {
const position = video.currentTime.toFixed(2);
info.textContent = `Час зупинки: ${position} с`;
// Сховище доступне не завжди: у пісочниці сторінка ізольована й кидає SecurityError
try {
localStorage.setItem('videoPausedTime', position);
} catch (error) {
console.log(`Сховище тут недоступне (${error.name}) — час лише показано на сторінці`);
}
});
// Власна кнопка керування — поруч із вбудованою кнопкою браузера
document.getElementById('pauseBtn').addEventListener('click', () => video.pause());
video.src = silentWav(20);
video.play().catch(error => console.log(`Автозапуск заборонено (${error.name})`));
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}Коментарі
Коментарів ще немає — будьте першим!