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

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

progress — це подія в JavaScript, яка виникає, коли медіа-елемент, наприклад, відео або аудіо, завантажує свої дані. Подія progress дозволяє відстежувати стан завантаження файлу, зокрема, коли нові частини даних були отримані. Це особливо корисно для медіафайлів, які передаються через мережу частинами, а не завантажуються миттєво.

Коли браузер завантажує відео або аудіо, подія progress дозволяє отримати інформацію про те, скільки даних було завантажено. Об'єкт події містить властивості, такі як event.loaded, що показує кількість байтів, які були завантажені, та event.total, що вказує загальний розмір файлу (якщо він відомий). Це дає можливість, наприклад, створити індикатор прогресу завантаження медіафайлу, який візуально показує користувачеві хід процесу.

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

let video = document.getElementById('myVideo');
video.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    let percentLoaded = (event.loaded / event.total) * 100;
    console.log(`Завантажено: ${percentLoaded}%`);
  }
});

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

Якщо браузер не може визначити загальний розмір медіафайлу (наприклад, через особливості мережі або сервера), подія progress все одно спрацьовує, але властивість event.lengthComputable буде false. У такому випадку ви не зможете визначити точний відсоток завантаження, але все одно можете виводити інші повідомлення про хід завантаження.

правити

Порада

Використовуйте progress для відображення статусу завантаження не тільки для медіафайлів, але й для інших типів великих файлів, наприклад, при завантаженні через API.

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

Порада

Подія progress може спрацьовувати багато разів під час завантаження медіа, що дозволяє постійно оновлювати стан завантаження. Однак подія не спрацьовує після завершення завантаження медіа. Для цього є інша подія — canplaythrough, яка сигналізує про те, що медіафайл повністю готовий до безперервного відтворення.

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

Порада

Подія progress не показує момент завершення завантаження медіафайлу. Для цього використовуйте canplaythrough або інші події, наприклад, loadeddata.

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

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

Синтаксис

element.addEventListener('progress', function(event) {
  // Ваш код
});

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<video id="myVideo" width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>
<progress id="progressBar" max="100" value="30"></progress>

let video = document.getElementById('myVideo');
let progressBar = document.getElementById('progressBar');

video.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    let percent = (event.loaded / event.total) * 100;
    progressBar.style.width = percent + '%';
    console.log(`Завантажено ${percent}%`);
  } else {
    console.log('Неможливо розрахувати прогрес');
  }
});

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

let video = document.getElementById('myVideo');
let lastUpdate = Date.now();

video.addEventListener('progress', function(event) {
  let now = Date.now();
  if (now - lastUpdate > 1000) { // Оновлюємо кожну секунду
    if (event.lengthComputable) {
      let percent = (event.loaded / event.total) * 100;
      console.log(`Оновлено через 1 сек: Завантажено ${percent}%`);
    }
    lastUpdate = now;
  }
});