{"id":14274,"url":"\/distributions\/14274\/click?bit=1&hash=fadd1ae2f2e07e0dfe00a9cff0f1f56eecf48fb8ab0df0b0bfa4004b70b3f9e6","title":"\u0427\u0435\u043c \u043c\u0443\u0440\u0430\u0432\u044c\u0438\u043d\u044b\u0435 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6fbf3884-3bcf-55d2-978b-295966d75ee2"}

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

Все новое — это хорошо забытое старое :-)

Ответить
Развернуть ветку
Павел Иванов
Ответить
Развернуть ветку
Никита Каляев

это что густой борщик со сметанкой ...ммм...аппетит разыгрался

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

именно он)) а ребус разгадан? 😉

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

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

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

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

Стыдоба 🙈

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

Не зря в нашем названии фигурирует слово Late)))

Требований для зацикленных видео мы не нашли, техподдержка тоже не прояснила ситуацию. Поэтому мы решили разобраться, как это работает на платформе Osnova.

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

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

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

Ответить
Развернуть ветку
1 комментарий
Светлана Белик

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

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

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

Ответить
Развернуть ветку
Андрей Кузнецов

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

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

Благодарим вас ❤️

У нас очень дотошный дизайнер (в хорошем смысле этого слова) 😀

Ответить
Развернуть ветку
1 комментарий
Nice Man

Щас бы все выперли прыгающие картинки, вот бы вы кайфанули с vc

Ответить
Развернуть ветку
6 комментариев
Павел Иванов
Ответить
Развернуть ветку
Макс Симченко

Ну теперь я хочу борщ (

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

значит надо есть 😀👍

Ответить
Развернуть ветку
2 комментария
Иван Ярославцев

Тебе нужно записаться к коучу, чтобы он тебя замотивировал на это

Ответить
Развернуть ветку
2 комментария
Настя

я просто залипла на обложку))) гипноребус)

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

используем запрещенные приемы 😀

Ответить
Развернуть ветку
Илья Зарецкий

теперь и я хочу обложку с борщом( чтоб все смотрели и у них текла слюнка

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

думаю, по инструкции у вас легко все получится 👍

Ответить
Развернуть ветку
С Ш

обло.. а дальше как?

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

облока?)) не) там через А.
может облом?) тоже не подходит...

ааа обложка! 😉

Ответить
Развернуть ветку
Станислав Ларин

Хорошая статья😉

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

Благодарим за обратную связь, очень ценно 🤗

Ответить
Развернуть ветку
Евгений Леснов

вот это поворот) вроде ж специальные онлайн сервисы автоамторм ужимают как надо. не?

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

Да, сервисы для преобразования есть. Но мы хотели узнать, с какими оптимальными параметрами можно выводить из After Effects, минуя дополнительные сервисы. Just Test it 🙃

Ответить
Развернуть ветку
Анастасия Исаева

Кому что, а мне борщик понравился на заставке))

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

ням 😍

Ответить
Развернуть ветку
Шевцова Марта

Обложка работает) Кучу внимания привлечено

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

не поспорить 👀

Ответить
Развернуть ветку
Виктор Арапов

Как вам лайк поставить? Вижу только кнопку "Скачать статью" и "Люблю эту публикацию"

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

Это можно сделать в самом конце статьи ❤️

Ответить
Развернуть ветку
Павел Иванов

Классный пост! Обожаю гифки!

Ответить
Развернуть ветку
Стас Иной

класс! буду пробовать. спасибо за статью, ребята!

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

благодарим за обратку 🙌
пользуйтесь на здоровье ❤️

Ответить
Развернуть ветку
Чайка О.

Для автоматических запускающихся медиафайлов есть свой файловый ад.

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

и какой он? 👀

Ответить
Развернуть ветку
4 комментария
Чайка О.

@Анастасия Пермякова, спасибо за скачивание. Понимаю, что вы поклонник агентства.
Авторы и группа поддержки, минусующие комменты с иным взглядом на предмет публикации, вызывают такие себе чувства. Но кто я, чтобы высказывать своё мнение? :)

Ответить
Развернуть ветку
4 комментария
Саша Седов

Ищу девушку

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

мы в вас верим))

Ответить
Развернуть ветку
Павел Иванов

Устал дрочить?

Ответить
Развернуть ветку
5 комментариев
NNIIKK55
мы облазили весь интернет

А ведь всё было совсем рядом
https://dtf.ru/u/81440-lebed/1380270-kak-delat-video-chtoby-oni-sami-igrali-i-malo-vesili

Ответить
Развернуть ветку
Торт Скряба

не читайте - animated gif

Ответить
Развернуть ветку
Студия Дениса Золотова

Спасибо, очень полезно! Мы занимаемся онлайн трансляциями и начинаем развивать свой блог на vc.ru, берем инструмент на вооружение 😎

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

Кайф! Ждем ваши живые обложки!)

Ответить
Развернуть ветку
Nice Man

Слава богу, нет автоплейного говна

Ответить
Развернуть ветку
akaaryn

Группа в Telegram для таргетологов

Присоединяйся и развивайся вместе с нами⤵️

https://t.me/targetclubkz

Ответить
Развернуть ветку
Павел Иванов
Ответить
Развернуть ветку
Анастасия Карпова - UN English

Спасибо за статью. Что такое битрейт и как его балансировать?

Ответить
Развернуть ветку
Дарь

спасибо огромное, это засейвило мне кучу времени

Ответить
Развернуть ветку
Дмитрий Колодник

А я не могу понять как сделать чтобы у меня хотябы обычные статичные обложки появились на моих статьях в ленте. У меня все статьи вообще без обложек)

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