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 секунд, виводиться повідомлення, що користувач намагається перемотати на початок. Ця поведінка може використовуватися, щоб контролювати певні обмеження або дії у відео додатках.
| Порада: | Застосовуючи |
| Порада: | Якщо під час перемотування потрібно показати індикатор завантаження, подія |
| Порада: | Також пам'ятайте, що |
Синтаксис
element.addEventListener('seeking', function(event) {
// код обробки події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач може взаємодіяти з відео та побачити, як подія seeking спрацьовує кожного разу, коли він починає перемотувати відео. У прикладі реалізований прогрес-бар і повідомлення про те, що відбувається під час перемотування відео.
Цей приклад демонструє, як можна використовувати подію seeking для показу індикатора завантаження під час перемотування відео. Коли користувач починає перемотувати (подія seeking), індикатор з'являється, а коли перемотування завершується (seeked), індикатор зникає. Це може бути корисним для інтерфейсів, які потребують плавного користувацького досвіду.
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';
});У цьому прикладі реалізовано обмеження на перемотування назад після досягнення певного часу. Якщо користувач намагається перемотати відео назад, відео автоматично повертається на останню допустиму позицію, а користувачу виводиться попередження. Така поведінка може бути корисною в освітніх або інтерактивних відео, де потрібен контроль над відтворенням.
const video = document.querySelector('video');
let lastPosition = 0;
video.addEventListener('seeking', function() {
if (video.currentTime < lastPosition) {
video.currentTime = lastPosition; // не дозволяємо перемотати назад
alert('Перемотування назад заборонено!');
} else {
lastPosition = video.currentTime;
}
});