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

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

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

Щоб працювати з цією подією в JavaScript, ви можете використовувати метод addEventListener, додаючи слухача до відео- або аудіо-елементу. Наприклад, ви можете відстежувати зміни позиції в медіафайлі і виконувати певні дії, як-от завантаження додаткових даних або оновлення інтерфейсу користувача.

Приклад простого використання:

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

video.addEventListener('seeked', function() {
  console.log('Користувач змінив позицію відтворення відео.');
});

У цьому прикладі після того, як користувач змінює позицію відтворення у відео, спрацьовує функція, яка виводить повідомлення в консоль.

Подія seeked може бути особливо корисною в додатках, де важливо контролювати прогрес відтворення або динамічно завантажувати вміст залежно від вибраного користувачем фрагменту. Наприклад, якщо ви хочете завантажувати певні метадані або аналітичні дані тільки після того, як користувач перегорнув до конкретного моменту медіафайлу, ця подія допоможе це відстежувати.

Ще один приклад використання:

video.addEventListener('seeked', function() {
  if (video.currentTime > 30) {
    alert('Ви перемотали більше ніж на 30 секунд відео.');
  }
});

У цьому випадку, якщо поточна позиція відтворення відео після перемотування перевищує 30 секунд, виводиться повідомлення.

Порада:	Якщо потрібно працювати з великими відеофайлами, подія `seeked` допоможе ефективно керувати завантаженням даних. Наприклад, якщо користувач перемотує відео, ви можете заздалегідь завантажити тільки частину файлу, до якої перемотано, щоб заощадити трафік.
Порада:	Звертайте увагу на можливу затримку між подіями `seeking` і `seeked`, особливо якщо відео важке або йде через мережу. Це важливо для програм, де час має критичне значення, як-от онлайн-трансляції або інтерактивні відео.
Порада:	Подія `seeked` може бути корисною при реалізації функції обмеження доступу до певних частин відео. Наприклад, можна заборонити перемотування на конкретний часовий відрізок або виконати спеціальні дії, якщо користувач перемотав відео до кінця.

Синтаксис

element.addEventListener('seeked', function(event) {
  // код обробки події
});

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/KKOKYdX">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Цей приклад блокує користувачу можливість перемотування відео далі 60 секунд, що може бути корисно для обмеженого доступу до контенту або навчальних відео, де користувач повинен дивитися відео повністю.

const video = document.querySelector('video');
let skipAllowed = false;

video.addEventListener('seeked', function() {
  if (!skipAllowed && video.currentTime > 60) {
    video.currentTime = 60; // блокуємо перемотування далі 60 секунд
    alert('Перемотування заборонено!');
  }
});

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

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

video.addEventListener('seeked', function() {
  const currentTime = video.currentTime;

  fetch(`/api/metadata?time=${currentTime}`)
    .then(response => response.json())
    .then(data => {
      console.log('Завантажено метадані для часу:', currentTime, data);
    });
});

JS довідник

JavaScript

Наповнення JS розділу