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

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

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

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

Як працює:

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

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

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

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

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

Синтаксис

element.addEventListener('playing', function(event) {
  // Ваш код
});

Значення

Return

Переглядачі

Переглядач
	66	57	11.1	53	16

Переглядач
	66	66	57	11.3

Переглядач
	15.0.0	1.0

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/poMzVpQ">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

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

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

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

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

JS довідник

JavaScript

Наповнення JS розділу