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

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

Порада

Звертайте увагу на можливу затримку між подіями seeking і seeked, особливо якщо відео важке або йде через мережу. Це важливо для програм, де час має критичне значення, як-от онлайн-трансляції або інтерактивні відео.

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	3	3.5	3.1	10.5	12	9

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

Переглядач
	4.4	18	4	3

Приклади

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

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

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

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

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

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);
    });
});