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

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

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

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

const video = document.querySelector('video');
video.addEventListener('timeupdate', (event) => {
  console.log(`Поточний час відтворення: ${video.currentTime}`);
});

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

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

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

правити

Порада

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

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

Порада

Використовуйте currentTime, щоб оновлювати інтерфейс користувача, наприклад, відображати час відео в режимі реального часу або оновлювати тайм-код в UI. Це допоможе користувачам орієнтуватися в прогресі відтворення мультимедіа.

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

Порада

Для економії ресурсів не додавайте непотрібних логічних операцій всередині обробника події timeupdate. Це може негативно вплинути на продуктивність, особливо при роботі з великими відео або на старих пристроях.

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

Приклади

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

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

const video = document.querySelector('video');
const subtitles = [
  { start: 0, end: 5, text: 'Початок відео' },
  { start: 5, end: 10, text: 'Продовження сюжету' }
];

video.addEventListener('timeupdate', () => {
  const currentTime = video.currentTime;
  subtitles.forEach((subtitle) => {
    if (currentTime >= subtitle.start && currentTime <= subtitle.end) {
      console.log(subtitle.text);
    }
  });
});

<progress id="progress-bar" max="100" value="30"></progress>
<video width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

const video = document.querySelector('video');
const progressBar = document.querySelector('#progress-bar');

video.addEventListener('timeupdate', () => {
  const percentage = (video.currentTime / video.duration) * 100;
  progressBar.style.width = `${percentage}%`;
});