{"id":14277,"url":"\/distributions\/14277\/click?bit=1&hash=17ce698c744183890278e5e72fb5473eaa8dd0a28fac1d357bd91d8537b18c22","title":"\u041e\u0446\u0438\u0444\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0442\u0440\u044b \u0431\u0435\u043d\u0437\u0438\u043d\u0430 \u0438\u043b\u0438 \u0437\u043e\u043b\u043e\u0442\u044b\u0435 \u0443\u043a\u0440\u0430\u0448\u0435\u043d\u0438\u044f","buttonText":"\u041a\u0430\u043a?","imageUuid":"771ad34a-9f50-5b0b-bc84-204d36a20025"}

Как сделать анимированную обложку для статьи на vc.ru с автозапуском?

В поисках ответа на этот вопрос мы облазили весь интернет. И нашли примерно НИ-ЧЕ-ГО. Анимированные обложки, которые мы загружали к статьям на vc.ru, упорно не хотели воспроизводиться автоматически.

Хотя мы видели, что у некоторых других блогов такой функционал есть.

Тогда мы обратились к техподдержке самой платформы.

На что получили такое сообщение:

При этом наше видео было меньше 20 мб и без звуковой дорожки.

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

Изначально ролик был в разрешении 1920x1080, размером 13 МБ, битрейтом в 5000 и длительностью 10 секунд. Вооружившись видео-конвертером, мы выделили несколько гипотез:

1. Разрешение 1080 слишком велико, пробуем 720

2. Длительность в 10 секунд неоправдана, поэтому сокращаем до 5 секунд (изначально элементы в анимации зациклены на 1 и 5 секунд соответственно)

3. Частота 30 кадров в секунду может тоже не устраивать сервис, поэтому приведем их к 15, как в gif-анимации

В результате пункты 1 и 2 сработали. И мы с чувством разгаданной тайны начали адаптировать прошлые обложки, чтобы и они воспроизводились автоматом.

Однако с ними уменьшение разрешения и длительности не помогло.

Тогда мы пришли к выводу, что ключевым параметром является вес видео. Он должен быть не более 3,5 МБ.

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

Рецепт идеальной анимированной обложки

В итоге мы оставили разрешение 1080, частоту кадров 50 — для более плавной анимации, при этом длительность сделали не больше 5 секунд, а битрейт — 3000, чтобы картинка не была совсем уж пиксельная.

Берите лайфхак на заметку и пользуйте. Надеемся, что теперь одной загадкой дыры стало меньше.

0
95 комментариев
Написать комментарий...
Светлана Белик

обложка привлекательная!

Ответить
Развернуть ветку
Агентство Flate Digital
Автор

шлем вам сердечко от нашего дизайнера ❤️

Ответить
Развернуть ветку
92 комментария
Раскрывать всегда