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

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

playing — це подія в JavaScript, яка виникає, коли медіа-контент, такий як відео або аудіо, починає відтворюватися після паузи або первинного завантаження. Ця подія особливо корисна для відстеження початку активного відтворення медіафайлу, що дозволяє розробникам виконувати певні дії на цей тригер.

Медіа-елементи, як-от <video> або <audio>, мають можливість зупинятися та поновлюватися, і подія playing дає можливість розробнику точно знати, коли користувач знову відтворює медіа. Наприклад, це може бути корисно для підрахунку активного часу відтворення відео або для зміни інтерфейсу користувача (наприклад, сховати кнопку паузи та показати кнопку відтворення).

Як працює:

1. Щоб обробляти подію playing, використовуйте метод addEventListener і прив’яжіть функцію, яка виконується під час запуску події. Функція обробника приймає об'єкт події як параметр, що дозволяє отримати доступ до додаткової інформації про медіа.

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

3. Якщо ви зупините відео чи аудіо або станеться буферизація, подія playing не відправляється знову до тих пір, поки не буде досягнуто стану відтворення після цієї паузи.

Приклад використання:

let video = document.getElementById('myVideo');
video.addEventListener('playing', function() {
  console.log('Відео почало відтворюватися!');
});

У цьому прикладі подія playing використовується для виведення повідомлення у консоль, коли відео відновлює відтворення.

правити

Порада

Будьте обережні при використанні playing у мобільних браузерах — деякі з них мають специфічні особливості для медіавідтворення, як-от автоматичне блокування відтворення без взаємодії користувача.

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.addEventListener('playing', 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>

let video = document.getElementById('myVideo');
let playCount = 0;

video.addEventListener('playing', function() {
  playCount++;
  console.log(`Відео відтворене ${playCount} раз(и) після паузи.`);
});

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

let video = document.getElementById('myVideo');

video.addEventListener('playing', function() {
  if (video.playbackRate < 1.5) {
    video.playbackRate = 1.5;
    console.log('Швидкість відтворення збільшена до 1.5x');
  }
});