wladislaw353

Не занимайтесь ерундой с видео!
Все делается буквально в пару строк кода и работает стабильнее

<img data-source="/img/frames/" data-frames="50" data-height="1300" src="" alt="">

Кол-во кадров: 50
Картинки называем 1.jpg, 2.jpg и тд
Высота 1300px, при скролле которой равномерно меняются кадры.

const $img            = document.querySelector('img')
const imgSource       = $img.getAttribute('data-source')
const framesCount     = $img.getAttribute('data-frames')
const scrollingHeight = $img.getAttribute('data-height')

changeFrame(window.scrollY)

document.addEventListener('scroll', () => {
    changeFrame(window.scrollY)
})

function changeFrame(scrollY) {
    let frame = parseInt(scrollY / (scrollingHeight / framesCount) + 1)
    frame = frame > framesCount ? framesCount : frame
    $img.setAttribute('src', imgSource + frame + '.jpg')
}