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 (коли поточний час відтворення медіафайлу змінюється), щоб забезпечити повний контроль над відтворенням медіа на веб-сторінках. Ця подія дозволяє розробникам створювати більш інтерактивні та динамічні інтерфейси користувача, що реагують на зміни у відтворюваних медіафайлах.

правити

Порада

Використовуйте durationchange для оновлення інтерфейсу користувача, як-от прогрес-бари або таймкоди. Це забезпечить актуальну інформацію про тривалість медіафайлу.

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

Порада

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

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

Порада

Використовуйте durationchange разом з іншими подіями, такими як loadedmetadata та timeupdate, для створення комплексних механізмів управління медіа на сторінці. Це дозволить вам створювати гнучкіші та адаптивніші медіаінтерфейси.

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

Приклади

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

<audio id="myAudio" controls>
    <source src="melody.mp3" type="audio/mpeg">
</audio>
<progress id="progressBar" max="100" value="30"></progress>

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;
});

<video id="myVideo" width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>
<div id="sourceSelector">Демонстраційний елемент</div>
<div id="durationDisplay">Демонстраційний елемент</div>

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)} секунд`;
});