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

правити

Порада

При створенні власних медіаплеєрів важливо використовувати подію loadedmetadata, щоб відстежувати розмір файлу та відповідно масштабувати або адаптувати інші елементи інтерфейсу, такі як прогрес-бар або таймер.

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

Порада

Якщо ви працюєте з кількома медіафайлами, переконайтеся, що подія loadedmetadata спрацьовує для кожного окремого файлу. Це дозволить вам відслідковувати метадані для кожного відео або аудіо на сторінці.

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

Порада

Іноді тривалість відео або аудіо може бути недоступною через особливості файлу. Якщо подія loadedmetadata не спрацьовує, варто перевірити формат медіафайлу та його метадані.

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

<audio id="audioElement" controls>
    <source src="melody.mp3" type="audio/mpeg">
</audio>
<audio id="audioDuration" controls>
    <source src="melody.mp3" type="audio/mpeg">
</audio>

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

<video id="videoElement" width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>
<video id="videoInfo" width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

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