Что важно понимать перед прочтением инструкции:
<aside>
💡
Сегодня говорим про то, что делать с уже готовой анимацией, например, мы со студентами делаем анимации в Figma, Jitter, Ae, а не про то как её в принципе сделать (для этого у меня есть отдельные уроки на канале по разным анимациям). Да и зачем она нужна ранее тоже рассказывала на канале, поэтому не об этом тоже пока!
</aside>
- Если у вас анимация в формате GIF, то вы можете интегрировать ее напрямую в свою упаковку на Be/Dp без сторонних сервисов (вы должны понимать, какие анимации лучше делать в формате GIF, а какие в формате видео – так как есть ограничение на их вес в том числе, например, максимальный размер GIF – 50 мб)
- Если у вас анимация в формате видео (большинство длинных и сложных анимаций приходится на этот формат), то мы будем использовать с вами сервис Vimeo (также мы со студентами используем классный сервис Kineskope для этого, но сегодня не про него)
- Записывать видео можно через запись экрана, если у вас macOS, а также через программу OBS (на YouTube есть небольшие туторы по её использованию, если не будет интуитивно что-то понятно), если анимация в Figma; Ae и Jitter – имеют свой собственный экспорт на анимации (как экспортировать Jitter в хорошем качестве без подписки – рассказывала в уроке)
Загружаем видео на Vimeo
<aside>
💡
Если у вас возникают проблемы со входом/регистрацией, то необходимо использовать VPN, а также не отечественные почты (Google, Proton и т.д.)
</aside>
- На Vimeo есть ограничение по загрузке видео в месяц, на один проект приходит иногда по 5 анимаций, поэтому у меня на Vimeo 2 аккаунта – если совмещать формат GIF и видео, то для упаковки одного проекта вам точно хватит :)
- В целом, после загрузки видео, Vimeo нам больше не понадобится, видео теперь будут храниться там, и нам остается только грамотно интегрировать их – без вотермарок и звука, а также чтобы они автоматически проигрывались и плеера не было видно (бесшовная анимация)
Интеграция видео с Vimeo
<aside>
💡
Если вдруг возникли трудности с Vimeo (или вообще с чем-либо) – пишите в тг-канале
</aside>
- После загрузки видео на странице самого видео в админке нажимаем на кнопку «Поделиться» и выбираем опцию — Embed / Share.
- Открываем видео в новом окне, нажимаем еще раз Share выбираем Fixed size, ставим размер оригинала, например, 1920х1080. Ставим галочки на Autoplay и Loop и отключаем галочки в поле Intro – Portrait / Title / Byline.
- Копируем кусок кода в блокнот или заметку на компьютере. И теперь мы можем добавить в этот код разные ключи (покажу их ниже), чтобы включить или отключить дополнительные настройки.
Например, ключ autoplay=1 поможет сделать так, чтобы видео воспроизводилось автоматически. Важно понимать, что в некоторых браузерах и после обновления Chrome оно все равно не будет автоматически запускаться, если только в плеере не отключен звук. Эту задачу решит ключ muted=1: muted=1&autopause=0&
Во многих кейсах бывает несколько встроенных видео, и хочется чтобы они играли все вместе и были зациклены. В некоторых браузерах запуск одного ролика может прервать работу другого. С помощью ключа autopause=0 можно это починить.
Ключей очень много, но некоторые будут работать только с платным тарифом Vimeo. Например, полное отключение интерфейса плеера.