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 не підтримує нативних параметрів для скасування або запобігання її виконання, як це роблять деякі інші події. Її основна задача — інформувати про завершення відтворення, а не втручатися в сам процес відтворення або взаємодію з користувачем під час програвання.

правити

Порада

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

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

Порада

Для оптимізації коду краще відписатися від події ended, якщо більше не потрібно її відстежувати. Використовуйте метод removeEventListener для запобігання небажаним спрацюванням події або втраті ресурсів.

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

Порада

Можна комбінувати подію ended з іншими подіями, такими як play, щоб відстежувати повну поведінку відтворення і створювати складні логіки для користувача, наприклад, додавання наступного треку у чергу.

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

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

Синтаксис

element.addEventListener('ended', function() {
  // Код, що виконується при завершенні
});

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

const video = document.querySelector('video');
video.addEventListener('ended', function() {
  video.currentTime = 0;
  video.play();
});

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

const track = document.querySelector('audio');
track.addEventListener('ended', function() {
  fetchNextTrack().then(nextTrack => {
    track.src = nextTrack;
    track.play();
  });
});