как сделать чтобы видео покадрово проигрывалась по скролу?

Question

Как сделать так, чтобы текущее время видео зависело от текущего местоположения скролла? Нужно сделать так, чтобы при скролле, текущее время видео менялось (кадр), а само время должно зависеть от положения ползунка в определённом месте на странице. Как такое можно реализовать?

Текущее время можно менять с помощью videoElement.currentTime, но как реализовать то, что описано выше?

Answer 1

Шаг 1: Процент полоски.

Чтобы узнать процент полоски есть несколько методов. Лично мне понравился вот этот:

function percentage(content, viewport) {
    return (viewport.scrollTop || content.scrollTop) / ((viewport.scrollHeight || content.scrollHeight) - viewport.clientHeight) * 100;
}

...взят отсюда.

Шаг 2: Процент видео

Процент видео ещё проще:

const video = document.querySelector(`video`);
const percentage = video.currentTime / video.duration;

Шаг 3: Синхронизация

Чтобы видео с полоской совпали, надо чтобы их процент был тот же. То есть

процент видео = процент полоски

...а поскольку процент видео выяснили что равно время / длительность

время / длительность = процент полоски

...и так как мы контролируем только время видео уравнение на js будет таким:

video.currentTime = Math.floor(percentage(content, viewport)) * video.duration;

Шаг 4: Слежка за изменениями

Теперь нам надо использовать это уравнение как только пользователь крутит полоску, то есть:

viewport.addEventListener(`scroll`, (event) => {
    function percentage(content, viewport) {
        return (viewport.scrollTop || content.scrollTop) / ((viewport.scrollHeight || content.scrollHeight) - viewport.clientHeight);
    }

    const video = document.querySelector(`video`);
    video.currentTime = Math.floor(percentage(content, viewport)) * video.duration;
});

Тонкие моменты

Не уверен насколько эффективно покрутить видео покадрово насчет оптимизации. Видео должно скачиваться, может зависать, плюс ещё пользователь может полоской туды сюды делать и вероятно лагать будет.

Answer 2

var video = document.getElementById('video');
document.onscroll = function(){
    video.currentTime = document.body.scrollTop / document.body.scrollHeight * video.duration;
}

<video style='position: fixed' id=video src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4' width="300" controls></video>

БЛОГ НА HUSL