Подія play в JavaScript — початок відтворення медіа
Загальний опис
Подія play виникає, коли медіафайл, наприклад, відео або аудіо, починає відтворюватися або відновлює відтворення після паузи. Ця подія надзвичайно корисна для відстеження моменту старту медіа на веб-сторінці, що дозволяє розробникам реагувати на початок відтворення певними діями, як-от зміна інтерфейсу користувача, запуск інших функцій, пов'язаних із медіавідтворенням, або надсилання аналітичних даних.
Подія play не спрацьовує, якщо медіа відтворюється автоматично при завантаженні сторінки без взаємодії користувача. Вона викликається лише тоді, коли відтворення запускається користувачем (натисканням кнопки або викликом методу play()) або відновлюється після паузи.
Ось приклад базового використання події:
const video = document.getElementById('myVideo');
video.addEventListener('play', function() {
console.log('Відтворення відео розпочалося.');
});
У цьому прикладі, коли користувач починає відтворення відео, в консолі з'являється повідомлення. Подія може бути використана для різних сценаріїв, таких як запуск таймерів, анімацій, або показ додаткових елементів інтерфейсу під час відтворення.
Подія play добре поєднується з іншими медіаподіями, такими як pause, ended та timeupdate, що дозволяє створювати інтерактивні медіаінтерфейси з повним контролем над відтворенням. Наприклад, ви можете змінювати інтерфейс програвача в реальному часі, залежно від того, чи медіа знаходиться в стані відтворення, паузи чи завершення.
Ця подія широко підтримується у всіх сучасних браузерах, тому її можна використовувати без побоювань щодо сумісності.
автор: Bond
- Порада
-
Рекомендується комбінувати
автор: Bondplayзpauseдля динамічного управління інтерфейсом, наприклад, перемиканням між кнопками "Грати" та "Пауза". Це зробить управління медіаплеєром більш інтерактивним і зручним для користувача. - Порада
-
Якщо на вашій сторінці присутня реклама перед медіаконтентом, подія
автор: Bondplayможе використовуватися для автоматичного відстеження старту медіа після завершення показу реклами. - Порада
-
Під час розробки інтерактивних веб-додатків, які використовують медіа, можна використовувати
автор: Bondplay, щоб автоматично відновлювати інші дії або анімації на сторінці, коли медіафайл починає відтворюватися. Наприклад, якщо на паузі зупинено анімації, вони можуть бути відновлені під час відтворення.
Синтаксис
element.addEventListener('play', function(event) {
// код для обробки події
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<header>
<h2 class="title">play</h2>
<p class="description">Демонструє подію play з динамічним оновленням інтерфейсу відеоплеєра.</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 id="playMessage" style="display: none; margin-top: 20px;">
<p>Відео почало відтворюватися!</p>
</div>
<div style="margin-top: 20px;">
<button id="playButton">Грати</button>
<button id="pauseButton" style="display: none;">Пауза</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 {
padding: 10px;
margin-right: 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 playMessage = document.getElementById('playMessage');
const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');
// Обробка події play
videoPlayer.addEventListener('play', function () {
playMessage.style.display = 'block'; // Показуємо повідомлення
playButton.style.display = 'none'; // Ховаємо кнопку "Грати"
pauseButton.style.display = 'inline'; // Показуємо кнопку "Пауза"
});
// Обробка події pause
videoPlayer.addEventListener('pause', function () {
playMessage.style.display = 'none'; // Ховаємо повідомлення
playButton.style.display = 'inline'; // Показуємо кнопку "Грати"
pauseButton.style.display = 'none'; // Ховаємо кнопку "Пауза"
});
// Відтворення відео через кнопку "Грати"
playButton.addEventListener('click', function () {
videoPlayer.play();
});
// Пауза відео через кнопку "Пауза"
pauseButton.addEventListener('click', function () {
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></p>
<div id="info">Відео зупинено</div>JS
const video = document.getElementById('myVideo');
video.addEventListener('play', function() {
document.getElementById('info').innerText = 'Відео відтворюється!';
});
// Власна кнопка керування — поруч із вбудованою кнопкою браузера
document.getElementById('playBtn').addEventListener('click', () => video.play());
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
<audio id="myAudio" controls></audio>
<p><button id="playBtn">Відтворити</button> <button id="pauseBtn">Пауза</button></p>
<div id="visualizer">Візуалізатор</div>CSS
#visualizer {
margin-top: 10px;
padding: 10px;
width: 220px;
text-align: center;
border: 1px solid #b6c6d3;
background-color: #eef3f7;
color: #55606a;
}
#visualizer.active {
background-color: #2a9d8f;
border-color: #21786e;
color: #fff;
}JS
const audio = document.getElementById('myAudio');
const visualizer = document.getElementById('visualizer');
audio.addEventListener('play', function() {
visualizer.classList.add('active');
});
audio.addEventListener('pause', function() {
visualizer.classList.remove('active');
});
// Власні кнопки керування — поруч із вбудованими кнопками браузера
document.getElementById('playBtn').addEventListener('click', () => audio.play());
document.getElementById('pauseBtn').addEventListener('click', () => audio.pause());
audio.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))}`;
}Коментарі
Коментарів ще немає — будьте першим!