JS властивість Array.loadedmetadata
Загальний опис
Подія loadedmetadata спрацьовує, коли метадані медіафайлу, такі як тривалість, розміри відео або аудіо та інші властивості, доступні для використання. Вона не чекає завантаження всього контенту медіафайлу, а лише метаданих, які надають інформацію про файл. Це важливо, оскільки за допомогою цієї події можна отримати ключову інформацію про медіафайл ще до його відтворення, наприклад, загальну тривалість відео або його розміри.
Ця подія є особливо корисною для налаштування медіаплеєрів або динамічного оновлення інтерфейсу, який залежить від розмірів або тривалості медіаконтенту. Наприклад, за допомогою loadedmetadata можна автоматично налаштувати програвач відповідно до розмірів відео або налаштувати таймлайн за тривалістю файлу.
Приклад використання:
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', function() {
console.log('Тривалість відео: ', video.duration);
console.log('Ширина відео: ', video.videoWidth);
console.log('Висота відео: ', video.videoHeight);
});
У цьому прикладі ми отримуємо доступ до тривалості відео та його розмірів одразу після того, як метадані стають доступними. Це дозволяє використовувати ці дані для різних цілей, наприклад, налаштування параметрів відтворення або відображення інформації для користувача.
Подія loadedmetadata корисна у випадках, коли потрібно відстежувати властивості медіафайлів до початку їх відтворення. Це дозволяє ефективніше управляти медіафайлами, змінювати параметри відтворення або налаштовувати інтерфейс користувача, не чекаючи завантаження всього файлу.
| Порада: | При створенні власних медіаплеєрів важливо використовувати подію |
| Порада: | Якщо ви працюєте з кількома медіафайлами, переконайтеся, що подія |
| Порада: | Іноді тривалість відео або аудіо може бути недоступною через особливості файлу. Якщо подія |
Синтаксис
element.addEventListener('loadedmetadata', function() {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад демонструє, як подія loadedmetadata допомагає отримати метадані відео після його завантаження. Користувач може завантажити відео натисканням на кнопку, після чого на екрані відобразиться інформація про тривалість та розміри відео. Відео стане видимим тільки після успішного завантаження метаданих. Це корисно для створення кастомних відеоплеєрів або відображення додаткової інформації для користувачів.
У цьому прикладі ми завантажуємо відео і відображаємо його тривалість у текстовому полі після завантаження метаданих. Це корисно для надання користувачам інформації про тривалість відео до початку його відтворення.
const video = document.getElementById('videoElement');
const info = document.getElementById('videoInfo');
video.addEventListener('loadedmetadata', function() {
info.textContent = `Тривалість відео: ${video.duration.toFixed(2)} секунд`;
});
video.src = 'https://www.example.com/sample-video.mp4';
video.load();Тут ми працюємо з аудіофайлом і після завантаження його метаданих виводимо тривалість аудіофайлу. Це дозволяє користувачу знати, скільки триває аудіо ще до початку відтворення.
const audio = document.getElementById('audioElement');
const displayDuration = document.getElementById('audioDuration');
audio.addEventListener('loadedmetadata', function() {
displayDuration.textContent = `Аудіо триває: ${audio.duration.toFixed(2)} секунд`;
});
audio.src = 'https://www.example.com/sample-audio.mp3';
audio.load();