Подія playing в JavaScript — відтворення вже почалося

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

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

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

Як працює:

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

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

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

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

автор: Bond

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

Синтаксис

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

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	3	3.5	3.1	10.5	12	9

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

Приклади

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

HTML

<header>
  <h2 class="title">HTML Events: playing</h2>
  <p class="description">Відстежує початок відтворення медіафайлу після паузи.</p>
</header>

<main>
  <div class="result">
    <!-- Відео для демонстрації -->
    <video id="myVideo" width="320" height="240" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='240' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
      Ваш браузер не підтримує відео тег.
    </video>

    <!-- Кнопки управління -->
    <div class="controls">
      <button id="playPauseBtn">Відтворити</button>
      <p id="status">Статус: зупинено</p>
    </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);
}

.controls {
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin-right: 10px;
}

p#status {
  margin-top: 10px;
  font-style: italic;
}

let video = document.getElementById('myVideo');
let playPauseBtn = document.getElementById('playPauseBtn');
let statusText = document.getElementById('status');

// Відстежуємо подію "playing"
video.addEventListener('playing', function () {
  playPauseBtn.textContent = 'Пауза';
  statusText.textContent = 'Статус: відтворюється';
});

// Відстежуємо подію "pause"
video.addEventListener('pause', function () {
  playPauseBtn.textContent = 'Відтворити';
  statusText.textContent = 'Статус: зупинено';
});

// Управління кнопкою відтворення/паузи
playPauseBtn.addEventListener('click', function () {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

// Джерело: беззвучний WAV, зібраний тут-таки (див. silentWav нижче)
video.src = silentWav(30);

// — службове: беззвучний 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))}`;
}

автор: Bond

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 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>

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

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

video.src = silentWav(30);

// — службове: беззвучний 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))}`;
}

автор: Bond

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 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>

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

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

video.src = silentWav(30);

// — службове: беззвучний 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))}`;
}

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Ваше ім'я Коментар

Як форматувати текст?

Пишемо	Виходить
`важливо` `акцент` `~~застаріле~~`	Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
`## Як працює каскад` `### Порядок оголошень`	Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
`[[css/property/color]]`	Посилання на сторінку довідника. Наберіть `[[` — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
`[[!sandbox/S0oh1hBm]]`	Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком `!`: наберіть `[[!` і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
`[MDN](https://developer.mozilla.org)`	Посилання на чужий сайт.
`![Схема каскаду](https://site.com/схема.png)`	Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру	Код усередині речення.
```css `.card { display: grid }` ```	Код блоком. Мова після трьох лапок вмикає підсвітку.
`- Походження` `1. Походження`	Перелік: маркований і нумерований.
`- [ ] дописати приклади` `- [x] перевірити в Firefox`	Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
`> Порядок важить лише за рівної ваги.`	Цитата на всю ширину абзацу.
`Специфічність` `: вага селектора; більша перемагає`	Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
`Каскад має три критерії[^1]` `[^1]: Походження, специфічність, порядок.`	Виноска: номер у тексті, примітка внизу сторінки. Без згадки `[^1]` у тексті примітка не з'явиться.
`Відповідь: \|\|сорок два\|\|`	Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
`\|\| Показати рішення` Задайте контейнеру `display: grid`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.