{"id":14285,"url":"\/distributions\/14285\/click?bit=1&hash=346f3dd5dee2d88930b559bfe049bf63f032c3f6597a81b363a99361cc92d37d","title":"\u0421\u0442\u0438\u043f\u0435\u043d\u0434\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u0443\u0442\u0435\u0448\u0435\u0441\u0442\u0432\u0438\u044f","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 комментариев
Написать комментарий...
Невероятный Блондин

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

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

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

Стыдоба 🙈

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

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

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

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

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

1. Редактор постов на VC позволяет смотреть черновик до его публикации, можно тестить.

2. Ваш рецепт "идеальной анимированной обложки" — 1080, 50 fps 3000 kb/s
На самом деле не только чрезмерный, но и вредный — это как заряжать ракетным топливом запорожец и пытаться возить на нем по 10 человек за раз.

Что также говорит о вашем профанстве в сфере видео экспорта.

Когда вы изучите вопрос, вы вспомните меня и поймете как были не правы в своём заключении.
А пока что, вы плодите вредные советы и нагружаете устройства пользователей, и сжигаете их трафик там где этого можно легко избежать.

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

Оптимизация - конечно круто, но блин, не настолько чрезмерная... Давайте теперь еще и Ютуб начнем в 480 и 30 фпс смотреть в 2023😁

Как по мне, 3 мб погоды моему трафику МТС не сделают.

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

На мобиле (в браузере), ты ютуб при всём желании выше 360p не посмотришь, даже на последнем айфоне. Это к вопросу о "в 2023"! — (см картинку ниже)

На VC (на десктопе) максимальная ширина content view = 1020px — это максимально, на что может развернуться твоё видео, и то при условии, что его соотношение сторон близко к 16:9, иначе оно автоматом завернется во frame (рамки вокруг видео/картинки).

Поэтому при такой ширине— делать больше 480p не целесообразно. Оно смасштабируется обратно.

30 fps — тоже overkill. Для такой "гифки" как в примере у автора, и 10-15 fps выше крыши. Это не сложная сцена и не слоумо.

А предложенные им 3000 kb/s — это норма для онлайн уроков в HD (1080p) формате, но никак не для 5-10 секундной заставки. Это тоже overkill.

Поэтому нет

Оптимизация - конечно круто

Это не круто, это как надо делать вообще в любом деле в любой сфере, хоть строительство хоть гифка, если за что-то берешься.

А иначе потом у таких «мастеров» выходят клиентские приложения на мобилки под пол гигабайта.

Но кому я это говорю, ведь

3 мб погоды моему трафику МТС не сделают.
Ответить
Развернуть ветку
Voin Mraka

Битрейт лучше посчитать и поставить максимальный который можешь себе позволить, но не больше, того, что указан в рекомендациях ютуба.
Т.е. если дано, длительность 10с, размер 5Мб, получается битрейт = 5•8/10 = 4 Мбит/с.
Для 480р 30фпс рекомендация ютуба - 2.5Мбит больше не надо, а для 720р в ютубе 5Мбит, но у нас есть только 4.

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

Ошибаешься в подходе и методике.

Я могу позволить себе и 50Mbps и больше.

Но мы не на ютубе, где как раз желательно!! заливать с двойным и выше качеством. Потому что они конвертируют его сами под все форматы и надо иметь запас.

Мы на VC загружаем анимированную обложку.
В нашем же случае, методика должна быть обратной: МИНИМАЛЬНОЕ качество которое можешь себе позволить чтобы и не стыдно и чтобы даже на пукалке открывалось и запускалось.

Так например этот мем я делал со следующими параметрами
720P • 24FPS • 2048 kb/s
«Весит» он при этом 1,2MB.

И хотя здесь достаточно активная сцена, его с легкостью можно ужать до 1200 kb/s, ты всё равно не успеешь заметить разницы.

Но и цели сделать 5-10 секунд в 4k — не стоит.
Цель — развлечь читателя ровно на 5-10 секунд, и чтобы у него всё загрузилось ДО прокрутки и/или одновременно со всем контентом без задержек.
И чтобы он не успел понять что в тенях не хватает деталей, а он и не успеет, наш мозг быстрее рисует.

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

а написали бы нормальный совет и эту статью никто бы не коментил и никогда бы она не всплыла

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

по обратной связи видим, что для многих статья была полезной) и круто, что есть те, кто шарит в теме лучше и может поделиться своим опытом 👍

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

480 для большинства ютубовских роликов вполне себе. 30 фпс тоже.

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

ну не знаю))))

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

Уважаемый, я бы добавил к вашему каналу прилагательное "Сказочный" и существительное "Советчик".

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