JS властивість Event.loadeddata
Загальний опис
Подія loadeddata викликається, коли достатньо медіаданих (відео або аудіо) завантажено для того, щоб почати відтворення. Це означає, що медіаплеєр зможе відтворювати дані, навіть якщо ще не всі дані завантажені (тобто буферизація продовжується). Ця подія зазвичай використовується для того, щоб відстежувати, коли відео або аудіо готові до відтворення після початкового завантаження.
Подія loadeddata корисна для випадків, коли потрібно виконати якісь дії одразу після того, як перша частина медіаданих була завантажена, і користувач може вже почати програвання медіа. Наприклад, можна використовувати цю подію, щоб змінити статус інтерфейсу користувача з "Завантаження..." на "Готово до відтворення", або почати автоматичне програвання після часткового завантаження медіа.
Приклад використання:
const video = document.querySelector('video');
video.addEventListener('loadeddata', function() {
console.log('Дані для відео успішно завантажені.');
});
У цьому прикладі подія loadeddata спрацьовує, як тільки завантажена достатня кількість даних для того, щоб відео можна було відтворювати. Це корисно в сценаріях, де важливо знати, що медіафайл готовий до часткового або повного відтворення.
Однак важливо пам'ятати, що ця подія не означає, що весь файл повністю завантажено. Вона лише сигналізує про те, що перший блок даних доступний і може бути використаний для відтворення. У великих медіафайлах буферизація може продовжуватись під час відтворення, тому подія loadeddata є важливим етапом в управлінні медіавідтворенням.
| Порада: | Щоб уникнути асинхронних проблем, переконайтеся, що медіафайли правильно налаштовані для попереднього завантаження. Використовуйте атрибут |
| Порада: | Завжди обробляйте можливі помилки або проблеми з завантаженням медіафайлів, наприклад, використовуючи подію |
| Порада: | Якщо ви хочете виконати певні дії після повного завантаження медіафайлу, використовуйте подію |
Синтаксис
element.addEventListener('loadeddata', function() {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад показує, як завантажити відео, почати відстежувати подію loadeddata та змінити інтерфейс користувача, коли відео готове до відтворення. Спочатку відео приховане, але після завантаження необхідних даних кнопка для відтворення стає активною, і відео показується.
У цьому прикладі завантажується аудіофайл, і після завантаження перших медіаданих відображається повідомлення "Аудіо готове до відтворення". Це зручно для покращення інтерфейсу користувача, коли важливо дати зрозуміти, що файл готовий до відтворення.
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();У цьому прикладі користувач може почати відтворення відео тільки після того, як завантажаться перші медіадані, і кнопка відтворення стає активною. Це хороший підхід для управління відтворенням медіа та підвищення зручності користувачів, коли медіа ще не готові до негайного запуску.
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; // Вимикаємо кнопку, поки медіа завантажується