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

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

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

Щоб відстежити цю подію, слід додати слухача до відео або аудіо елемента за допомогою методу addEventListener. Коли подія seeking спрацьовує, ви можете отримати доступ до поточного часу відтворення через властивість currentTime.

Наприклад:

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

video.addEventListener('seeking', function() {
  console.log(`Користувач почав перемотування. Поточна позиція: ${video.currentTime} секунд.`);
});

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

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

Ще один приклад:

video.addEventListener('seeking', function() {
  if (video.currentTime < 10) {
    console.log('Користувач намагається перемотати назад на початок відео.');
  }
});

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

правити

Порада

Застосовуючи seeking, важливо тестувати поведінку в різних браузерах та з різними типами медіа-файлів, оскільки подія може реагувати по-різному на великих файлах чи потоковому відео.

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

Порада

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

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

Порада

Також пам'ятайте, що seeking не спрацьовує при автоматичній зміні позиції відтворення, викликаній самим відео (наприклад, при програванні). Це подія, яка відстежує тільки ручне або програмне перемотування, тому використовуйте її відповідно до ваших потреб.

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	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');
const loadingIndicator = document.createElement('div');
loadingIndicator.textContent = 'Завантаження...';
loadingIndicator.style.display = 'none';
document.body.appendChild(loadingIndicator);

video.addEventListener('seeking', function() {
  loadingIndicator.style.display = 'block';
});

video.addEventListener('seeked', function() {
  loadingIndicator.style.display = 'none';
});

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

const video = document.querySelector('video');
let lastPosition = 0;

video.addEventListener('seeking', function() {
  if (video.currentTime < lastPosition) {
    video.currentTime = lastPosition; // не дозволяємо перемотати назад
    alert('Перемотування назад заборонено!');
  } else {
    lastPosition = video.currentTime;
  }
});