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

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

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

Щоб використовувати подію abort у JavaScript, необхідно додати прослуховувач подій (event listener) до медіа-елемента. Це можна зробити за допомогою методу addEventListener(), який дозволяє виконувати певний код у відповідь на подію. Наприклад:

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

video.addEventListener('abort', function(event) {
  console.log('Завантаження відео було скасовано.');
});

У наведеному прикладі, коли завантаження відео буде скасовано, в консолі браузера з'явиться повідомлення.

Подія abort є корисною для ситуацій, коли потрібно обробити непередбачені переривання в процесі завантаження медіафайлів. Наприклад, можна відобразити повідомлення користувачу або виконати інші дії для повторного завантаження файлу або реєстрації помилки.

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

Також слід пам'ятати, що подія abort не підтримується для всіх типів елементів. Вона здебільшого використовується з елементами <audio> та <video>, оскільки ці типи файлів можуть займати значну кількість ресурсів і можуть бути скасовані користувачем у процесі завантаження. Наприклад, якщо користувач натискає кнопку "Стоп" під час завантаження відео, подія abort буде викликана.

правити

Порада

Не використовуйте подію abort для відстеження стану завантаження зображень. Подія abort не підтримується елементом <img>. Якщо потрібно обробити подібні ситуації для зображень, використовуйте подію error або load замість abort.

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

Порада

Завжди перевіряйте підтримку подій і методів у різних браузерах. Подія abort підтримується більшістю сучасних браузерів, але завжди варто переконатися в сумісності з тими браузерами, на які ви орієнтуєтесь.

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

audio.addEventListener('abort', function(event) {
  alert('Завантаження аудіо було скасовано користувачем.');
});

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

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

video.addEventListener('abort', function(event) {
  const currentTime = new Date();
  console.log(`Завантаження було скасовано о ${currentTime.toLocaleTimeString()}`);
});