Плавная прокрутка html5 видео?

Question

[yarovikov]

Привет всем.

Имеется



Как сделать плавную прокрутку видео ползунком? Чтобы кадры менялись сразу, без задержки? Я так понимаю, затык в буферизации и производительности, может кто решал такую проблему.

Comments

[VoidVolker]

yarovikov и что именно у вас не получается? В чём проблема?

[yarovikov]

VoidVolker, в том, что оно рывками проматывается. или не проматывается, пока не отпустишь ползунок, и только тогда меняется позиция видео. Все описано в вопросе..

Answer 1

[Антон Горецкий]

попробуй добавить антидребезг:

let debounceTimeout;

videoProgress.addEventListener('input', () => {
  clearTimeout(debounceTimeout);
  debounceTimeout = setTimeout(() => {
    video.currentTime = videoProgress.value;
  }, 200); // 200 мс задержки, пробуй менять от 50 до 500 примерно
});

Comments

[yarovikov]

Да, я это тоже пробовал. С ним даже хуже, чем без него. Вот на ютубе работает как надо

Answer 2

[maxonklakson]

Привет! Плавная прокрутка видео с помощью seek bar, особенно покадрово и без задержек, действительно может быть сложной задачей из-за: буферизации и декодирования видео, ограничений браузеров, производительности системы. Но ее можно реализовать довольно качественно, если учесть несколько моментов. Вот как можно добиться максимально плавной прокрутки:
Основные рекомендации:
1. Используй requestVideoFrameCallback
Это современный API, позволяющий отслеживать рендеринг кадров и синхронизировать UI.
video.requestVideoFrameCallback(function(now, metadata) {
// можно обновлять UI с точностью до кадра
});
2. Отключи автоматическое буферизование
Можно задать preload="none" и вручную загружать видео. Это даст тебе больше контроля, но увеличит время загрузки при первом воспроизведении.

3. Управляй currentTime вручную на input
Свяжи range input с video.currentTime.
Используй input (не change), чтобы получать плавные обновления при перемещении ползунка.

const video = document.getElementById('myVideo');
const slider = document.getElementById('slider');

slider.addEventListener('input', () => {
const duration = video.duration;
video.currentTime = (slider.value / 100) * duration;
});
4. Используй .pause() и избегай .play() при прокрутке
Не позволяй видео автоматически воспроизводиться — особенно при прокрутке назад/вперед. Это уменьшит лаги.
5. Формат видео — ключ
Лучше всего работает: видео без B-frames (только I и P кадры), высокая частота ключевых кадров (GOP ~1-2 сек), кодек: H.264 с хорошей поддержкой браузерами, низкое разрешение (если нет нужды в 4K).
Альтернатива:
Покадровая прокрутка через изображения
Если тебе нужно супер-точное управление — можно экспортировать кадры в PNG/JPEG и просто отображать нужное изображение при прокрутке.
Но это не масштабируется для больших видео.
Проблемы:
В некоторых браузерах (Safari, особенно на iOS) currentTime может с запозданием менять кадр.

Comments

[yarovikov]

Моя тебе рекомендация - не используй копипаст с chatgpt для ответов на хабре