JS властивість Event.timeupdate
Загальний опис
Подія timeupdate виникає, коли поточний час відтворення мультимедійного елемента, такого як відео або аудіо, змінюється. Це дозволяє розробникам відстежувати час відтворення і реагувати на зміни, наприклад, для оновлення інтерфейсу користувача або реалізації функцій, що залежать від прогресу відео чи аудіо.
timeupdate викликається під час відтворення медіа, коли поточний час змінюється, зазвичай кожні 250 мс, але точний інтервал може залежати від браузера та налаштувань медіа. Для роботи з цією подією потрібно використовувати метод addEventListener, щоб прослуховувати подію для медіаелемента.
const video = document.querySelector('video');
video.addEventListener('timeupdate', (event) => {
console.log(`Поточний час відтворення: ${video.currentTime}`);
});
У прикладі вище подія timeupdate дозволяє виводити поточний час відтворення кожен раз, коли він змінюється. Можна використовувати властивість currentTime, щоб отримати значення часу, на якому зараз знаходиться медіа.
Використовуючи timeupdate, можна створювати різні інтерактивні можливості для користувачів. Наприклад, відображати поточний час відео на індикаторі прогресу або синхронізувати анімації з відео. Подія відбувається автоматично під час відтворення, але якщо відео паузиться або перемотується, подія викликається лише після оновлення часу.
Крім того, важливо розуміти, що timeupdate не генерується постійно під час паузи або зупинки медіа, тому всі оновлення прогресу пов'язані саме з відтворенням мультимедійного елемента. Подія не завжди виникає при кожній зміні кадру, але достатньо часто для оновлення часу з точністю до кількох мілісекунд.
| Порада: | Для економії ресурсів не додавайте непотрібних логічних операцій всередині обробника події |
| Порада: | Якщо вам потрібно працювати з кількома медіафайлами одночасно, додайте обробник події для кожного з них окремо і синхронізуйте їх через єдину функцію. Це дозволить зменшити кількість зайвих обчислень. |
| Порада: | Використовуйте |
Синтаксис
element.addEventListener('timeupdate', function(event) {
// Ваш код
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад реалізує інтерактивний відеопрогравач із кнопками "Відтворити/Пауза" та "Почати спочатку". За допомогою події timeupdate, поточний час відтворення відео оновлюється на прогрес-барі та відображається у вигляді тексту.
Цей приклад демонструє, як можна синхронізувати субтитри з відео на основі часу відтворення. timeupdate використовується для постійної перевірки часу і виведення відповідного тексту.
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);
}
});
});У цьому прикладі за допомогою події timeupdate можна динамічно оновлювати індикатор прогресу відтворення відео. Прогрес-бар змінюється в реальному часі відповідно до тривалості відтворення мультимедіа.
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}%`;
});