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 секунд, виводиться повідомлення.
автор: Bond
- Порада
-
Якщо потрібно працювати з великими відеофайлами, подія
автор: Bondseekedдопоможе ефективно керувати завантаженням даних. Наприклад, якщо користувач перемотує відео, ви можете заздалегідь завантажити тільки частину файлу, до якої перемотано, щоб заощадити трафік. - Порада
-
Звертайте увагу на можливу затримку між подіями
автор: Bondseekingіseeked, особливо якщо відео важке або йде через мережу. Це важливо для програм, де час має критичне значення, як-от онлайн-трансляції або інтерактивні відео. - Порада
-
Подія
автор: Bondseekedможе бути корисною при реалізації функції обмеження доступу до певних частин відео. Наприклад, можна заборонити перемотування на конкретний часовий відрізок або виконати спеціальні дії, якщо користувач перемотав відео до кінця.
Синтаксис
element.addEventListener('seeked', function(event) {
// код обробки події
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<header>
<h2 class="title">HTML Event: seeked</h2>
<p class="description">Подія спрацьовує після завершення перемотування відео</p>
</header>
<main>
<div class="result">
<!-- Відео для взаємодії -->
<video id="myVideo" width="600" height="338" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='338' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>
<!-- Виведення повідомлень -->
<div id="output"></div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
#output {
margin-top: 15px;
padding: 10px;
background-color: #eaeaea;
border: 1px solid #ccc;
}JS
const video = document.getElementById('myVideo');
const output = document.getElementById('output');
// Додаємо обробник події 'seeked'
video.addEventListener('seeked', function () {
// Отримуємо поточний час відтворення після перемотування
const currentTime = video.currentTime;
// Виводимо повідомлення
output.innerHTML = `Перемотування завершено. Поточний час: ${currentTime.toFixed(2)} секунд.`;
});
// Джерело: беззвучний WAV, зібраний тут-таки (див. silentWav нижче)
video.src = silentWav(30);
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<video id="clip" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>JS
const video = document.getElementById('clip');
video.addEventListener('seeked', function() {
const currentTime = video.currentTime;
loadMetadata(currentTime)
.then(data => {
console.log('Завантажено метадані для часу:', currentTime, data);
});
});
video.src = silentWav(30);
// На бойовій сторінці тут був би запит до сервера; у прикладі метадані
// віддає ця заглушка — вона повертає такий самий проміс
function loadMetadata(time) {
const chapters = ['Вступ', 'Основна частина', 'Підсумок'];
return Promise.resolve({ chapter: chapters[Math.min(Math.floor(time / 10), 2)] });
}
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<video id="clip" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>JS
const video = document.getElementById('clip');
let skipAllowed = false;
video.addEventListener('seeked', function() {
if (!skipAllowed && video.currentTime > 5) {
video.currentTime = 5; // блокуємо перемотування далі п'ятої секунди
alert('Перемотування заборонено!');
}
});
video.src = silentWav(30);
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}Коментарі
Коментарів ще немає — будьте першим!