{"id":14276,"url":"\/distributions\/14276\/click?bit=1&hash=721b78297d313f451e61a17537482715c74771bae8c8ce438ed30c5ac3bb4196","title":"\u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0432\u0430\u0440 \u0438\u043b\u0438 \u0443\u0441\u043b\u0443\u0433\u0443 \u0431\u0435\u0437 \u0431\u0438\u0440\u0436\u0438","buttonText":"","imageUuid":""}

Как сделать анимированную обложку для статьи на 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 комментариев
Написать комментарий...
Андрей Кузнецов

И история интересная, гайд полезный))
К слову, полистал Вашу ленту, анимированные обложки и выглядят интереснее и внимания привлекают больше, лайк за проделанные труды😄

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