Блог студии 77

Прокрутка видео с помощью скролла

5 января 2016

Для анимации использовался Adobe Flash. В нем можно настроить количество промежуточных кадров, тем самым регулируя плавность движения.

Флеш позволяет экспортировать в avi и этим я планировал воспользоваться. Проблема возникла в том, что соотношения сторон пикселя в видео при данном экспорте – 1×1.09. Из за этого пропорции видео при импорте в Adobe Premiere (в настройках которого используется стандартные 1×1) менялись.

Но, как выяснилось, импортировать в Premiere можно не только видео, но и swf-файл, и здесь с пропорциями всё хорошо.

Отдельный досадный нюанс при таком экспорте – случайным образом иногда пропадают некоторые слои или объекты импортированного swf. Также, после импорта объекты пропадают и в самом swf. С чем это связано – так и не удалось выяснить, поэтому приходилось по нескольку раз генерировать swf и делать резервные копии.

Сжатие видео в mp4 и webm

После того, как видеоряд готов, его необходимо перевести в два видеоформата – mp4 и webm.

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

Для сжатия в mp4 используется кодек H264.

Настройки кодека h264

Важным параметром для подобного использования видео является GOP (group of pictures). Чем меньше его значение, тем, теоретически, плавнее анимация, но больше вес файла. За данное значение в Premiere, как мы думали, отвечает дополнительный параметр Key Frame Distance. На самом деле нет.

Разные браузеры используют разное видео — Chrome открывает mp4, Opera и FireFox – Webm.

Полученный результат в плане плавности видео я оценил так: mp4 – 2/5, WebM – 1/5

При прокрутке кадры пачками пропускались, наблюдались дерганья и залипания.

Возникла идея сделать видео медленнее, тем самым планировалось уменьшить визуальный дискомфорт от пропуска кадров. Добавив во Флеше промежуточных кадров и растянув в Премьере видео на 50% из 5 секунд получил 20 секунд довольно плавного видео.

При скроллинге видео стало смотреться чуть стабильнее, но крутить стало совсем неудобно. mp4 – 3/5, webm – 2/5.

В настройках блока html, отвечающего за вывод видео, есть параметры времени видео и высоты зоны его прокрутки. Соответственно, если при одном нажатии стрелочки вниз, прокручивается 40 px, то для 1 секунды видео (с частотой кадров 25) необходимо прокрутить 1000px окна браузера. Если поставить значения ниже, то кадры будут пропускаться.

Настройка GOP

Как выяснилось, GOP можно выставить в другой программе - Xmedia Recode.

Таким образом, в Adobe Premiere мы сжимали видео с высоким качеством и после пережимали его в Xmedia Recode с меньшим качеством и настроенным GOP'ом.

Для сжатия в WebM понадобилось установить для Premiere соответствующий плагин и назначить кодек VP8. Но так, как в WebM тоже необходимы настройки GOP'ов, проще всего уже готовый mp4 с хорошим качеством пересжать в WebM сразу в Xmedia Recode.

Настройки для XMedia Recode

Для mp4:

Настройки в Xmedia Recode для MP4

Для WebM:

Настройки в Xmedia Recode для WebM

Результаты можно посмотреть в описании проектов: «Лускунчика», Квест-комната «Закрыто», Barva и «Печатный мир».

Прокрутка видео с помощью скролла
  • Денис
  • арт-директор
  • 25 статей

Другие статьи автора: