{"id":14268,"url":"\/distributions\/14268\/click?bit=1&hash=1e3309842e8b07895e75261917827295839cd5d4d57d48f0ca524f3f535a7946","title":"\u0420\u0430\u0437\u0440\u0435\u0448\u0430\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430\u043c \u0438\u0433\u0440\u0430\u0442\u044c \u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043c\u0435\u0441\u0442\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f71e1caf-7964-5525-98be-104bb436cb54"}

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

Ну вы и слоупоки.

До 5 мегабайт делай без аудиодорожки — будет лупиться 🔁

И эти люди считают себя digital.

Стыдоба 🙈

Ответить
Развернуть ветку
Михеева Ольга

тут даже тех поддержка четких инструкций не дала)

Ответить
Развернуть ветку
Невероятный Блондин

Я только что дал инструкции, пользуйтесь.

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