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

автор: Bond

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

Синтаксис

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

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	3	3.5	3.1	10.5	12	9

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

Приклади

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

HTML

<header>
  <h2 class="title">HTML Event: seeking</h2>
  <p class="description">Подія спрацьовує, коли користувач починає перемотувати відео.</p>
</header>
<main>
  <div class="result">
    <!-- Відео елемент -->
    <video id="myVideo" width="600" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
      Ваш браузер не підтримує відтворення відео.
    </video>
    <!-- Прогрес бар -->
    <div class="progress-container">
      <label for="progressBar">Прогрес перемотування:</label>
      <progress id="progressBar" value="0" max="100"></progress>
    </div>
    <p><button id="seekBtn">Перемотати на середину</button></p>
    <!-- Виведення повідомлення -->
    <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);
}

.progress-container {
  margin-top: 20px;
}

#output {
  margin-top: 15px;
  padding: 10px;
  background-color: #eaeaea;
  border: 1px solid #ccc;
  font-style: italic;
}

const video = document.getElementById('myVideo');
const progressBar = document.getElementById('progressBar');
const output = document.getElementById('output');

// Додаємо обробник події 'seeking'
video.addEventListener('seeking', function () {
  // Отримуємо поточний час відтворення
  const currentTime = video.currentTime;
  // Обчислюємо прогрес як відсоток від загальної тривалості
  const progress = currentTime / video.duration * 100;
  // Оновлюємо значення прогрес-бару
  progressBar.value = progress;
  // Виводимо повідомлення
  output.textContent = `Користувач почав перемотування. Поточний час: ${currentTime.toFixed(2)} секунд.`;
});

// Очищаємо повідомлення
video.addEventListener('seeked', function () {
  setTimeout(() => {
    output.innerHTML = ''; // Очищаємо повідомлення через 2 секунди після завершення перемотування
  }, 2000);
});

// Перемотування можна почати як повзунком плеєра, так і кнопкою
document.getElementById('seekBtn').addEventListener('click', () => {
  video.currentTime = video.duration / 2;
});

video.src = silentWav(20);

// — службове: беззвучний 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))}`;
}

автор: Bond

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 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>
<p><button id="seekBtn">Перемотати на середину</button></p>

const video = document.getElementById('clip');
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';
});

document.getElementById('seekBtn').addEventListener('click', () => {
  video.currentTime = video.duration / 2;
});

video.src = silentWav(20);

// — службове: беззвучний 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))}`;
}

автор: Bond

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 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>
<p>
  <button id="forwardBtn">Перемотати вперед</button>
  <button id="backBtn">Перемотати назад</button>
</p>

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

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

document.getElementById('forwardBtn').addEventListener('click', () => {
  video.currentTime = Math.min(video.currentTime + 5, video.duration);
});

document.getElementById('backBtn').addEventListener('click', () => {
  video.currentTime = Math.max(video.currentTime - 5, 0);
});

video.src = silentWav(20);

// — службове: беззвучний 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))}`;
}

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Ваше ім'я Коментар

Як форматувати текст?

Пишемо	Виходить
`важливо` `акцент` `~~застаріле~~`	Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
`## Як працює каскад` `### Порядок оголошень`	Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
`[[css/property/color]]`	Посилання на сторінку довідника. Наберіть `[[` — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
`[[!sandbox/S0oh1hBm]]`	Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком `!`: наберіть `[[!` і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
`[MDN](https://developer.mozilla.org)`	Посилання на чужий сайт.
`![Схема каскаду](https://site.com/схема.png)`	Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру	Код усередині речення.
```css `.card { display: grid }` ```	Код блоком. Мова після трьох лапок вмикає підсвітку.
`- Походження` `1. Походження`	Перелік: маркований і нумерований.
`- [ ] дописати приклади` `- [x] перевірити в Firefox`	Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
`> Порядок важить лише за рівної ваги.`	Цитата на всю ширину абзацу.
`Специфічність` `: вага селектора; більша перемагає`	Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
`Каскад має три критерії[^1]` `[^1]: Походження, специфічність, порядок.`	Виноска: номер у тексті, примітка внизу сторінки. Без згадки `[^1]` у тексті примітка не з'явиться.
`Відповідь: \|\|сорок два\|\|`	Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
`\|\| Показати рішення` Задайте контейнеру `display: grid`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.