JS властивість Event.loadeddata

Загальний опис

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

Подія loadeddata корисна для випадків, коли потрібно виконати якісь дії одразу після того, як перша частина медіаданих була завантажена, і користувач може вже почати програвання медіа. Наприклад, можна використовувати цю подію, щоб змінити статус інтерфейсу користувача з "Завантаження..." на "Готово до відтворення", або почати автоматичне програвання після часткового завантаження медіа.

Приклад використання:

const video = document.querySelector('video');
video.addEventListener('loadeddata', function() {
  console.log('Дані для відео успішно завантажені.');
});

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

Однак важливо пам'ятати, що ця подія не означає, що весь файл повністю завантажено. Вона лише сигналізує про те, що перший блок даних доступний і може бути використаний для відтворення. У великих медіафайлах буферизація може продовжуватись під час відтворення, тому подія loadeddata є важливим етапом в управлінні медіавідтворенням.

правити

Порада

Щоб уникнути асинхронних проблем, переконайтеся, що медіафайли правильно налаштовані для попереднього завантаження. Використовуйте атрибут preload="auto" для того, щоб браузер сам завантажував медіафайли заздалегідь, коли це необхідно.

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

Порада

Завжди обробляйте можливі помилки або проблеми з завантаженням медіафайлів, наприклад, використовуючи подію error. Це дозволить забезпечити більш надійну роботу вашого додатка при роботі з медіаданими.

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

Приклади

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

<div id="status">Демонстраційний елемент</div>
<audio controls>
    <source src="melody.mp3" type="audio/mpeg">
</audio>

const audio = document.querySelector('audio');
const status = document.getElementById('status');

audio.addEventListener('loadeddata', function() {
  status.textContent = 'Аудіо готове до відтворення';
});

audio.src = 'https://www.example.com/audiofile.mp3';
audio.load();

<button id="playButton">Відтворити</button>
<video width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>

const video = document.querySelector('video');
const playButton = document.getElementById('playButton');

video.addEventListener('loadeddata', function() {
  playButton.disabled = false; // Включаємо кнопку відтворення після завантаження медіаданих
});

playButton.addEventListener('click', function() {
  video.play();
});

video.src = 'https://www.example.com/videofile.mp4';
video.load();
playButton.disabled = true; // Вимикаємо кнопку, поки медіа завантажується