Управление видео HTML5 с помощью scrollMagic, почему прерывистая анимация / пропущенные кадры?

Hey SO members,

Я хочу воспроизводить видео HTML5 вперед и назад вместе с прокруткой. Анимация контролирует видео кадр за кадром относительно величины прокрутки.

Я закодировал (он легкий и очень простой) это с помощью scrollMagic. Встроенное видео также является легким (пробовали уродливые / слишком уменьшенные видео с теми же результатами).

Проблема, с которой я столкнулся, заключается в том, что при плавной прокрутке анимация выглядит едва гладкой. Но при быстрой прокрутке как будто пропадает много кадров. Я предполагаю, что это может быть нормально, например, если процент прогресса упадет с 50% до 75%. Но это не так. Процент, отображаемый в консоли, показывает, что процентное значение обновляется плавно, некоторые кадры не окрашиваются и в результате получается прерывистая анимация. Хотелось бы, чтобы все было плавно, независимо от того, как быстро пользователь прокручивает. Есть предположения ?

https://jsfiddle.net/yumigo/h7g081n6/72/


html frame video scrollmagic
person Yumigo    schedule 21.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В конце концов я понял, что ключ к успеху - это видео. MP4 должен иметь очень низкий интервал между ключевыми кадрами (в моем случае 2, а не обычно 10), чтобы обеспечить плавную прокрутку, особенно при прокрутке вверх. Кроме того, сначала загрузите mp4, поскольку воспроизведение веб-страниц кажется более интенсивным для процессора. Теперь идеально гладкий.

Я обновил свой jsfiddle.

person Yumigo    schedule 21.09.2020