JS властивість Event.ended
Загальний опис
Подія ended спрацьовує, коли медіафайл, такий як аудіо або відео, досягає кінця свого відтворення. Це корисно для того, щоб виконати певні дії, як-от перезавантаження відео або показ повідомлення користувачеві після завершення перегляду контенту. Ця подія не спрацьовує під час паузи або зупинки відтворення — вона викликається лише після повного програвання медіафайлу.
Щоб використовувати ended, потрібно прив'язати цю подію до елемента через метод addEventListener. Наприклад:
const video = document.querySelector('video');
video.addEventListener('ended', function() {
alert('Відео завершено!');
});
У цьому прикладі, коли відео досягає кінця, з'являється сповіщення для користувача. Подія ended доступна для різних медіафайлів, таких як аудіо, відео та інші елементи, що підтримують програвання. Це дозволяє вам контролювати поведінку після завершення контенту, наприклад, автоматично запускати наступне відео або оновлювати статус в інтерфейсі користувача.
Якщо потрібно виконати щось більше, ніж просто повідомити користувача, можна запускати складні сценарії. Наприклад, ви можете оновити інтерфейс користувача, додати медіафайл до списку відтворених або навіть відправити аналітичні дані на сервер.
const audio = document.querySelector('audio');
audio.addEventListener('ended', function() {
console.log('Аудіо завершено, відправляємо дані...');
// Відправляємо дані на сервер
fetch('/track-completion', {
method: 'POST',
body: JSON.stringify({ trackId: audio.src }),
});
});
Таким чином, можна інтегрувати цю подію у ваш веб-додаток для автоматизації різних процесів, що відбуваються після завершення медіаконтенту. Варто зазначити, що подія ended не підтримує нативних параметрів для скасування або запобігання її виконання, як це роблять деякі інші події. Її основна задача — інформувати про завершення відтворення, а не втручатися в сам процес відтворення або взаємодію з користувачем під час програвання.
- Порада
-
Перевіряйте, чи відбувається подія через дочасне завершення відтворення, наприклад, через досягнення кінця файлу під час паузи. Це можна виявити через використання додаткових подій на кшталт
автор: Bondpauseабоtimeupdate. - Порада
-
Для оптимізації коду краще відписатися від події
автор: Bondended, якщо більше не потрібно її відстежувати. Використовуйте методremoveEventListenerдля запобігання небажаним спрацюванням події або втраті ресурсів. - Порада
-
Можна комбінувати подію
автор: Bondendedз іншими подіями, такими якplay, щоб відстежувати повну поведінку відтворення і створювати складні логіки для користувача, наприклад, додавання наступного треку у чергу.
Синтаксис
element.addEventListener('ended', function() {
// Код, що виконується при завершенні
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 66 | 57 | 11.1 | 53 | 16 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 66 | 66 | 57 | 11.3 |
| Переглядач |  |
 |
|---|---|---|
| 15.0.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<header>
<h2 class="title">HTML Events: ended</h2>
<p class="description">Подія спрацьовує після завершення відтворення відео або аудіо.</p>
</header>
<main>
<div class="result">
<video id="videoPlayer" width="400" 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>
<br><br>
<button id="nextVideoBtn">Завантажити наступне відео</button>
<p id="status"></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);
}
#status {
margin-top: 15px;
font-weight: bold;
}JS
const videoPlayer = document.getElementById('videoPlayer');
const statusText = document.getElementById('status');
const nextVideoBtn = document.getElementById('nextVideoBtn');
// Спрацьовує, коли відео закінчується
videoPlayer.addEventListener('ended', function () {
statusText.textContent = 'Відео завершено!';
});
// При натисканні кнопки завантажується нове відео
nextVideoBtn.addEventListener('click', function () {
videoPlayer.src = silentWav(2);
statusText.textContent = 'Завантажено нове відео!';
videoPlayer.play();
});
// — службове: беззвучний 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 muted 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>JS
const video = document.getElementById('clip');
video.addEventListener('ended', function() {
console.log('Відео завершилось — запускаємо спочатку');
video.currentTime = 0;
video.play();
});
video.src = silentWav(3);
video.play().catch(error => console.log(`Автозапуск заборонено (${error.name})`));
// — службове: беззвучний 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="player" controls muted></audio>JS
const track = document.getElementById('player');
// Плейлист: тут — синтезовані ролики різної довжини замість справжніх файлів
const playlist = [2, 3, 4];
let index = 0;
function fetchNextTrack() {
index = (index + 1) % playlist.length;
return Promise.resolve(silentWav(playlist[index]));
}
track.addEventListener('ended', function() {
fetchNextTrack().then(nextTrack => {
track.src = nextTrack;
track.play();
console.log(`Трек завершився — вмикаємо наступний, ${playlist[index]} с`);
});
});
track.src = silentWav(playlist[0]);
track.play().catch(error => console.log(`Автозапуск заборонено (${error.name})`));
// — службове: беззвучний 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))}`;
}Коментарі
Коментарів ще немає — будьте першим!