JS властивість Event.play
Загальний опис
Подія play виникає, коли медіафайл, наприклад, відео або аудіо, починає відтворюватися або відновлює відтворення після паузи. Ця подія надзвичайно корисна для відстеження моменту старту медіа на веб-сторінці, що дозволяє розробникам реагувати на початок відтворення певними діями, як-от зміна інтерфейсу користувача, запуск інших функцій, пов'язаних із медіавідтворенням, або надсилання аналітичних даних.
Подія play не спрацьовує, якщо медіа відтворюється автоматично при завантаженні сторінки без взаємодії користувача. Вона викликається лише тоді, коли відтворення запускається користувачем (натисканням кнопки або викликом методу play()) або відновлюється після паузи.
Ось приклад базового використання події:
const video = document.getElementById('myVideo');
video.addEventListener('play', function() {
console.log('Відтворення відео розпочалося.');
});
У цьому прикладі, коли користувач починає відтворення відео, в консолі з'являється повідомлення. Подія може бути використана для різних сценаріїв, таких як запуск таймерів, анімацій, або показ додаткових елементів інтерфейсу під час відтворення.
Подія play добре поєднується з іншими медіаподіями, такими як pause, ended та timeupdate, що дозволяє створювати інтерактивні медіаінтерфейси з повним контролем над відтворенням. Наприклад, ви можете змінювати інтерфейс програвача в реальному часі, залежно від того, чи медіа знаходиться в стані відтворення, паузи чи завершення.
Ця подія широко підтримується у всіх сучасних браузерах, тому її можна використовувати без побоювань щодо сумісності.
| Порада: | Рекомендується комбінувати |
| Порада: | Якщо на вашій сторінці присутня реклама перед медіаконтентом, подія |
| Порада: | Під час розробки інтерактивних веб-додатків, які використовують медіа, можна використовувати |
Синтаксис
element.addEventListener('play', function(event) {
// код для обробки події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад показує інтерактивну взаємодію користувача з відео через події play та pause. Коли відео починає відтворюватися, користувач бачить відповідне повідомлення та змінені кнопки керування, що дозволяють зупиняти або відновлювати відтворення. Це дає змогу створювати кастомні відеоплеєри з інтерактивними елементами керування на основі медіаподій.
У цьому прикладі під час запуску відтворення відео на сторінці змінюється текст у спеціальному елементі з повідомленням для користувача. Це дозволяє динамічно інформувати користувачів про стан медіа на сторінці.
const video = document.getElementById('myVideo');
video.addEventListener('play', function() {
document.getElementById('info').innerText = 'Відео відтворюється!';
});У цьому прикладі під час відтворення аудіо активується візуалізатор, який починає анімацію. Коли аудіо ставиться на паузу, візуалізатор вимикається. Це корисно для створення інтерактивних візуальних ефектів під час відтворення музики або подкастів на сторінці.
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');
});