Подія durationchange — змінилася тривалість медіа в JS
Загальний опис
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 (коли поточний час відтворення медіафайлу змінюється), щоб забезпечити повний контроль над відтворенням медіа на веб-сторінках. Ця подія дозволяє розробникам створювати більш інтерактивні та динамічні інтерфейси користувача, що реагують на зміни у відтворюваних медіафайлах.
- Порада
-
Використовуйте
автор: Bonddurationchangeдля оновлення інтерфейсу користувача, як-от прогрес-бари або таймкоди. Це забезпечить актуальну інформацію про тривалість медіафайлу. - Порада
-
Перевіряйте значення
автор: BondNaNтривалості, особливо коли працюєте з потоковими медіа або медіа, тривалість яких може змінюватися в процесі. Це дозволить обробити випадки, коли тривалість медіафайлу недоступна. - Порада
-
Використовуйте
автор: Bonddurationchangeразом з іншими подіями, такими якloadedmetadataтаtimeupdate, для створення комплексних механізмів управління медіа на сторінці. Це дозволить вам створювати гнучкіші та адаптивніші медіаінтерфейси.
Синтаксис
element.addEventListener('durationchange', function(event) {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<header>
<h2 class="title">Event - durationchange</h2>
<p class="description">Активується при зміні тривалості медіафайлу, наприклад, відео або аудіо.</p>
</header>
<main>
<div class="result">
<label for="video-selector">Виберіть відео:</label>
<select id="video-selector">
<option value="3">Короткий ролик (3 секунди)</option>
<option value="12">Довгий ролик (12 секунд)</option>
</select>
<video id="video-player" controls width="320" height="240" 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>
<p id="duration-info">Тривалість відео: <span id="duration">0</span> секунд</p>
</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);
}
#video-player {
display: block;
margin-top: 15px;
}
#duration-info {
margin-top: 10px;
font-weight: bold;
}JS
const videoPlayer = document.getElementById('video-player');
const durationDisplay = document.getElementById('duration');
const videoSelector = document.getElementById('video-selector');
// Додаємо подію 'durationchange' для відеоплеєра
videoPlayer.addEventListener('durationchange', () => {
const duration = videoPlayer.duration;
durationDisplay.textContent = duration ? duration.toFixed(2) : "Недоступна";
});
// Зміна джерела відео при виборі в списку
videoSelector.addEventListener('change', event => {
videoPlayer.src = silentWav(Number(event.target.value));
videoPlayer.load(); // Завантажуємо нове відео
});
// Початкове джерело — щоб було з чим порівнювати
videoPlayer.src = silentWav(Number(videoSelector.value));
// — службове: беззвучний 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="myVideo" width="320" height="180" 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>
<p>
<label for="sourceSelector">Джерело:</label>
<select id="sourceSelector">
<option value="3">Ролик на 3 секунди</option>
<option value="12">Ролик на 12 секунд</option>
</select>
</p>
<div id="durationDisplay">Тривалість поки невідома</div>JS
const videoElement = document.getElementById('myVideo');
const sourceElement = document.getElementById('sourceSelector');
sourceElement.addEventListener('change', function(event) {
videoElement.src = silentWav(Number(event.target.value));
videoElement.load();
});
videoElement.addEventListener('durationchange', function(event) {
console.log(`Новий файл, тривалість відео: ${videoElement.duration} секунд.`);
document.getElementById('durationDisplay').textContent = `Тривалість: ${videoElement.duration.toFixed(2)} секунд`;
});
videoElement.src = silentWav(Number(sourceElement.value));
// — службове: беззвучний 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
<audio id="myAudio" controls muted></audio>
<progress id="progressBar" max="100" value="0"></progress>JS
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;
});
audioElement.src = silentWav(8);
audioElement.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))}`;
}Коментарі
Коментарів ще немає — будьте першим!