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

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

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

Подія play не спрацьовує, якщо медіа відтворюється автоматично при завантаженні сторінки без взаємодії користувача. Вона викликається лише тоді, коли відтворення запускається користувачем (натисканням кнопки або викликом методу play()) або відновлюється після паузи.

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

const video = document.getElementById('myVideo');
video.addEventListener('play', function() {
  console.log('Відтворення відео розпочалося.');
});

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

Подія play добре поєднується з іншими медіаподіями, такими як pause, ended та timeupdate, що дозволяє створювати інтерактивні медіаінтерфейси з повним контролем над відтворенням. Наприклад, ви можете змінювати інтерфейс програвача в реальному часі, залежно від того, чи медіа знаходиться в стані відтворення, паузи чи завершення.

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

правити

Порада

Рекомендується комбінувати play з pause для динамічного управління інтерфейсом, наприклад, перемиканням між кнопками "Грати" та "Пауза". Це зробить управління медіаплеєром більш інтерактивним і зручним для користувача.

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

Порада

Якщо на вашій сторінці присутня реклама перед медіаконтентом, подія play може використовуватися для автоматичного відстеження старту медіа після завершення показу реклами.

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	3	3.5	3.1	10.5	12	9

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

Переглядач
	4.4	18	4	3

Приклади

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

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

const video = document.getElementById('myVideo');
video.addEventListener('play', function() {
  document.getElementById('info').innerText = 'Відео відтворюється!';
});

<audio id="myAudio" controls>
    <source src="melody.mp3" type="audio/mpeg">
</audio>
<div id="visualizer">Демонстраційний елемент</div>

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');
});