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 - Порада
-
Використовуйте
автор: BondcurrentTime, щоб оновлювати інтерфейс користувача, наприклад, відображати час відео в режимі реального часу або оновлювати тайм-код в UI. Це допоможе користувачам орієнтуватися в прогресі відтворення мультимедіа. - Порада
-
Для економії ресурсів не додавайте непотрібних логічних операцій всередині обробника події
автор: Bondtimeupdate. Це може негативно вплинути на продуктивність, особливо при роботі з великими відео або на старих пристроях.
Синтаксис
element.addEventListener('timeupdate', function(event) {
// Ваш код
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<header>
<h2 class="title">HTML Events: timeupdate</h2>
<p class="description">Відстежує зміни часу відтворення відео.</p>
</header>
<main>
<div class="result">
<video id="video" width="400" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не підтримує тег відео.
</video>
<div>
<button id="playPauseBtn">Відтворити</button>
<button id="resetBtn">Почати спочатку</button>
</div>
<div style="margin-top: 15px;">
<div style="background-color: #ddd; width: 100%; height: 10px; position: relative;">
<div id="progress" style="background-color: #76c7c0; height: 10px; width: 0%;"></div>
</div>
</div>
<div style="margin-top: 10px;">
Поточний час: <span id="currentTime">0.00</span> сек / Загальна тривалість: <span id="duration">0.00</span> сек
</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);
}
#playPauseBtn, #resetBtn {
margin-right: 10px;
}
#progress {
transition: width 0.25s ease-in-out;
}JS
const video = document.getElementById('video');
const playPauseBtn = document.getElementById('playPauseBtn');
const resetBtn = document.getElementById('resetBtn');
const progress = document.getElementById('progress');
const currentTimeDisplay = document.getElementById('currentTime');
const durationDisplay = document.getElementById('duration');
// Оновлення відображення часу та прогресу
video.addEventListener('timeupdate', () => {
const currentTime = video.currentTime;
const duration = video.duration;
const percentage = currentTime / duration * 100;
// Оновлюємо прогрес-бар
progress.style.width = `${percentage}%`;
// Оновлюємо поточний час і тривалість
currentTimeDisplay.textContent = currentTime.toFixed(2);
durationDisplay.textContent = duration.toFixed(2);
});
// Відтворення/паузи відео
playPauseBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
playPauseBtn.textContent = 'Пауза';
} else {
video.pause();
playPauseBtn.textContent = 'Відтворити';
}
});
// Почати відео з початку
resetBtn.addEventListener('click', () => {
video.currentTime = 0;
video.play();
playPauseBtn.textContent = 'Пауза';
});
// Оновлення тривалості відео після завантаження метаданих
video.addEventListener('loadedmetadata', () => {
durationDisplay.textContent = video.duration.toFixed(2);
});
video.src = silentWav(20);
// — службове: беззвучний 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))}`;
}HTML
<video id="clip" width="320" height="180" controls muted poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>JS
const video = document.getElementById('clip');
const subtitles = [
{ start: 0, end: 5, text: 'Початок відео' },
{ start: 5, end: 10, text: 'Продовження сюжету' }
];
let shown = '';
video.addEventListener('timeupdate', () => {
const currentTime = video.currentTime;
subtitles.forEach((subtitle) => {
if (currentTime >= subtitle.start && currentTime <= subtitle.end && shown !== subtitle.text) {
shown = subtitle.text;
console.log(subtitle.text);
}
});
});
video.src = silentWav(12);
video.play().catch(error => console.log(`Автозапуск заборонено (${error.name})`));
// — службове: беззвучний 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))}`;
}HTML
<progress id="progress-bar" max="100" value="0"></progress>
<video id="clip" width="320" height="180" controls muted poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>JS
const video = document.getElementById('clip');
const progressBar = document.querySelector('#progress-bar');
video.addEventListener('timeupdate', () => {
const percentage = (video.currentTime / video.duration) * 100;
progressBar.value = percentage;
});
video.src = silentWav(12);
video.play().catch(error => console.log(`Автозапуск заборонено (${error.name})`));
// — службове: беззвучний 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))}`;
}Коментарі
Коментарів ще немає — будьте першим!