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 для відстеження стану завантаження зображень. Подія
автор: Bondabortне підтримується елементом<img>. Якщо потрібно обробити подібні ситуації для зображень, використовуйте подіюerrorабоloadзамість abort. - Порада
-
Завжди перевіряйте підтримку подій і методів у різних браузерах. Подія
автор: Bondabortпідтримується більшістю сучасних браузерів, але завжди варто переконатися в сумісності з тими браузерами, на які ви орієнтуєтесь. - Порада
-
Враховуйте можливі сценарії, коли користувачі можуть скасовувати завантаження медіафайлів, наприклад, через обмеження трафіку або недостатню швидкість інтернету. У таких випадках корисно надавати користувачам інформацію про стан завантаження та можливість повторного завантаження файлу.
автор: Bond
Синтаксис
element.addEventListener('abort', function(event) {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 66 | 57 | 11.1 | 53 | 16 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 66 | 66 | 57 | 11.3 |
| Переглядач |  |
 |
|---|---|---|
| 15.0.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<header>
<h2 class="title">abort (HTML Event)</h2>
<p class="description">Виникає, коли завантаження медіафайлу скасовується.</p>
</header>
<main>
<div class="result">
<video id="video" width="320" height="240" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не підтримує відтворення відео.
</video>
<button id="abortButton">Скасувати завантаження</button>
<p id="message"></p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
#abortButton {
margin-top: 15px;
padding: 10px 20px;
background-color: #e74c3c;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
}
#abortButton:hover {
background-color: #c0392b;
}
#message {
margin-top: 15px;
font-weight: bold;
color: #e74c3c;
}JS
document.addEventListener('DOMContentLoaded', function () {
const video = document.getElementById('video');
const abortButton = document.getElementById('abortButton');
const message = document.getElementById('message');
// Джерело: беззвучний WAV, зібраний тут-таки (див. silentWav нижче)
video.src = silentWav(30);
// Додаємо слухача події "abort" до відео
video.addEventListener('abort', function (event) {
message.textContent = 'Завантаження відео було скасовано!';
});
// Функція для скасування завантаження відео
function abortVideoLoading() {
video.pause(); // Зупиняємо відтворення
video.removeAttribute('src');
video.load(); // Перезавантаження без джерела перериває поточне
}
// Додаємо обробник події на кнопку
abortButton.addEventListener('click', abortVideoLoading);
});
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<audio id="melody" controls></audio>
<p><button id="abortButton">Скасувати завантаження</button></p>JS
const audio = document.getElementById('melody');
audio.src = silentWav(30);
audio.addEventListener('abort', function(event) {
alert('Завантаження аудіо було скасовано користувачем.');
});
document.getElementById('abortButton').addEventListener('click', function() {
audio.removeAttribute('src');
audio.load(); // перезавантаження без джерела перериває поточне
});
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<video id="clip" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>
<p><button id="abortButton">Скасувати завантаження</button></p>JS
const video = document.getElementById('clip');
video.src = silentWav(30);
video.addEventListener('abort', function(event) {
const currentTime = new Date();
console.log(`Завантаження було скасовано о ${currentTime.toLocaleTimeString()}`);
});
document.getElementById('abortButton').addEventListener('click', function() {
video.removeAttribute('src');
video.load(); // перезавантаження без джерела перериває поточне
});
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}Коментарі
Коментарів ще немає — будьте першим!