JS властивість Event.durationchange
Загальний опис
durationchange — це подія, яка спрацьовує, коли змінюється тривалість медіафайлу (наприклад, аудіо або відео). Ця подія важлива, коли тривалість мультимедійного контенту стає відомою або змінюється внаслідок завантаження нового медіафайлу або зміни його джерела. Подія durationchange використовується для динамічного оновлення елементів інтерфейсу, таких як таймкоди або прогрес-бари, що залежать від тривалості медіафайлу.
Коли браузер спочатку не знає тривалість медіафайлу, він встановлює її значення в NaN (Not a Number). Коли тривалість стає відомою (наприклад, після завантаження метаданих), подія durationchange спрацьовує, і тривалість оновлюється до нового значення. Подія також спрацьовує, якщо медіафайл замінюється іншим файлом, тривалість якого відрізняється. Наприклад:
const videoElement = document.getElementById('myVideo');
videoElement.addEventListener('durationchange', function(event) {
console.log(`Нова тривалість відео: ${videoElement.duration} секунд.`);
document.getElementById('durationDisplay').textContent = `Тривалість: ${videoElement.duration.toFixed(2)} секунд`;
});
У цьому прикладі, коли змінюється тривалість відеофайлу, консоль виводить нове значення тривалості, і це значення також відображається у елементі з ідентифікатором durationDisplay.
Подія durationchange часто використовується разом з іншими подіями медіафайлів, такими як loadedmetadata (коли метадані медіафайлу, такі як розміри і тривалість, повністю завантажені) і timeupdate (коли поточний час відтворення медіафайлу змінюється), щоб забезпечити повний контроль над відтворенням медіа на веб-сторінках. Ця подія дозволяє розробникам створювати більш інтерактивні та динамічні інтерфейси користувача, що реагують на зміни у відтворюваних медіафайлах.
| Порада: | Використовуйте |
| Порада: | Перевіряйте значення |
| Порада: | Використовуйте |
Синтаксис
element.addEventListener('durationchange', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач може обирати різні відеофайли зі списку, і при зміні тривалості медіа відображатиметься актуальна тривалість. Подія durationchange забезпечує оновлення інформації при завантаженні нового відео, дозволяючи динамічно відображати тривалість навіть при підключенні різних медіафайлів.
У цьому прикладі подія durationchange використовується для встановлення максимальної тривалості прогрес-бара після зміни тривалості аудіофайлу. Це забезпечує точну синхронізацію прогрес-бара з відтворенням аудіо.
const audioElement = document.getElementById('myAudio');
const progressBar = document.getElementById('progressBar');
audioElement.addEventListener('durationchange', function(event) {
progressBar.max = audioElement.duration;
console.log(`Тривалість аудіо змінено на: ${audioElement.duration} секунд.`);
});
audioElement.addEventListener('timeupdate', function(event) {
progressBar.value = audioElement.currentTime;
});Цей приклад показує, як обробляти подію durationchange після зміни джерела відеофайлу. Коли користувач обирає нове джерело, тривалість відео оновлюється, і відповідна інформація відображається на сторінці. Це корисно для динамічного управління медіа-контентом на веб-сторінках, де користувач може вибирати різні файли для відтворення.
const videoElement = document.getElementById('myVideo');
const sourceElement = document.getElementById('sourceSelector');
sourceElement.addEventListener('change', function(event) {
videoElement.src = event.target.value;
videoElement.load();
});
videoElement.addEventListener('durationchange', function(event) {
console.log(`Новий файл, тривалість відео: ${videoElement.duration} секунд.`);
document.getElementById('durationDisplay').textContent = `Тривалість: ${videoElement.duration.toFixed(2)} секунд`;
});