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 не підтримує нативних параметрів для скасування або запобігання її виконання, як це роблять деякі інші події. Її основна задача — інформувати про завершення відтворення, а не втручатися в сам процес відтворення або взаємодію з користувачем під час програвання.
| Порада: | Перевіряйте, чи відбувається подія через дочасне завершення відтворення, наприклад, через досягнення кінця файлу під час паузи. Це можна виявити через використання додаткових подій на кшталт |
| Порада: | Для оптимізації коду краще відписатися від події |
| Порада: | Можна комбінувати подію |
Синтаксис
element.addEventListener('ended', function() {
// Код, що виконується при завершенні
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад реалізує відеоплеєр з кнопкою, що дозволяє завантажувати інше відео після завершення поточного. Коли користувач натискає на кнопку, відтворюється інший відеофайл, і текст повідомляє про статус відео. Подія ended спрацьовує автоматично, коли відео досягає кінця, що оновлює статус сторінки.
Цей приклад показує, як можна реалізувати функцію автоматичного повторного відтворення відео після його завершення. Подія ended скидає таймер відео на початок і автоматично відтворює його знову.
const video = document.querySelector('video');
video.addEventListener('ended', function() {
video.currentTime = 0;
video.play();
});У цьому прикладі подія ended використовується для автоматичного завантаження наступного треку з сервера після завершення поточного. Це може бути корисно для аудіо-плеєрів або музичних платформ.
const track = document.querySelector('audio');
track.addEventListener('ended', function() {
fetchNextTrack().then(nextTrack => {
track.src = nextTrack;
track.play();
});
});