{"id":13583,"url":"\/distributions\/13583\/click?bit=1&hash=e33bc0d3a37a74826169363c867d3f9f74deaa73040cb6145c82841335993467","title":"\u041d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c \u042f\u043d\u0434\u0435\u043a\u0441\u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0432\u0438\u0434\u0435\u043e \u0432 \u043f\u0440\u044f\u043c\u043e\u043c \u044d\u0444\u0438\u0440\u0435","buttonText":"\u041a\u0430\u043a?","imageUuid":"135b72ce-4b43-5240-a9ca-242ab0616d40","isPaidAndBannersEnabled":false}
Дизайн
Агентство МЭЙК

Как снимать и монтировать фоновые видео для сайта

Рассказываем на примерах, на что обращать внимание в дизайне и разработке сайтов с видео. Как готовить и проводить съёмки, как красить, какими кодеками сжимать интерфейсные видео.

Концепт, по которому был сделан сайт холдинга СДС. В нем и видео, и фото, и 3D. 

«Чуваки, вот макет главной, потом мы сюда воткнём клёвый видос»

— плохой путь

Пре-продакшен

Дизайнеру:

Сначала дизайн, затем ТЗ для съемки. Задание должно быть готово на этапе эскиза и в форме эскиза с готовыми блоками, которым нужно видео. Прикинуть и прописать, какими должны быть композиция видео, количество деталей, цвет.

Также следует сделать прототип с пустотой на альфа-канале, чтобы можно было поставить отснятый материал на месте и увидеть, как видео живет в дизайне.

Видеопродакшену:

Сначала — скаутинг. Производства изменчивы. На горных работах, например конфигурация может сильно измениться всего за сутки. Разведку лучше провести в то же время суток, в которое планируются съемки.

После видеопродакшен должен принести в офис:

  • фото всех локаций и объектов;
  • контакты ИТР на местах — начальники участков, цехов, замы по производству, безопасности. Это те люди, которые создают условия для работы и решают проблемы.

Оборудование

Видеопродакшену:

  • Основных объективов три: 35 мм, 50 мм и длиннофокусный — например 100 или 70-200. Экстремально широкий угол объектива искажает пропорции, “мажет” углы, меняет геометрию кадра. Он может понадобиться только в особых случаях;
  • Важна компактность камер и систем стабилизации — на производстве приходится либо лезть, либо бежать;
  • Штативы нужны в любом случае;
  • ND и поляризационные фильтры обязательны, они дают больше свободы. В яркое полуденное солнце объекты с несолнечной стороны проваливаются в глухую тень. С солнечной — пропадает небо и объем;
  • Для связи — рации с гарнитурой. Сотовая связь не везде, а докричаться уже с 10 метров часто невозможно;
  • Накамерные мониторы и шторки от солнца, а также пара больших черных зонтов. Под ярким солнцем в карьере без этого придется снимать полностью вслепую — оголенная порода, отвалы и пыль отражают солнечный свет почти как снег;
  • Кратко технические требования к исходникам выглядят так:

— Apple ProRes, RAW или S-Log, C-Log, V-Log;
— Максимальный битрейт и разрешение;
— Дроны: от 10 бит, так легче сматчить с картинкой с камер;
— Частота кадров зависит от концепта —100 FPS нужно нечасто. Достаточно 50-60 FPS.

Команда

Дизайнеру:

Дизайнеру стоит быть на связи с продюсером, скинуть пробные файлы дизайнеру, чтобы убедиться в верности композиции бывает полезно

Видеопродакшену:

Под каждый вид съемки нужен отдельный человек с комплектом оборудования — камеры, объективы, допоборудование. Продюсер контролирует съемку, ведет учет “снято-неснято”, следит за соответствием материалов ТЗ, держит связь с дизайнером. Первый оператор снимает по раскадровке, второй ассистирует ему либо снимает требующие отдельной работы кадры, например таймлапсы.

Роли пилота дрона и оператора лучше не совмещать. Часто дроном приходится снимать внутри цехов, с сильными электромагнитными помехами. Это трудно и нервно.

Как монтировать фоновые видео

Дизайнеру:

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

Также следует сразу решить, какова будет техническая реализация видео: несколько коротких последовательных роликов или потоковая загрузка. Это решение влияет на монтаж, а монтаж — на съемку. Так фронтендера нужно пытать заранее, перед съемкой, на этапе пре-продакшена.

Видеопродакшену:

Если видео предназначено для фона сайта, то оно будет сильно сжато. В этом случае уровень камеры не имеет решающего значения, а разрешения full HD будет достаточно. Но! Часто дизайн сайтов предполагает нестандартные разрешения и соотношения кадра, поэтому лучше снимать в 4К, будет резерв для кадрирования. 4К пригодится и если скаутинг был плохой или его не было.

При монтаже фоновых видео: первый кадр — это последний кадр, последний кадр — это первый кадр. Видеоспот таким образом замыкается в петлю. Важно проговорить с разрабами формат вывода видео и варианты оптимизации. От хронометража видео будет зависеть темп монтажа. В беседе с разработчиками главный вопрос — финальный размер видеофайла, который будет встроен в сайт. Всё это нужно решить на пре-продакшене.

Цветокоррекция и кадрирование фоновых видео для сайтов

Дизайнеру:

Стоит сразу определиться, будут ли видео на сайте перекрыты маской. Если да, стоит донести это до видеопродакшена. Чтобы он либо заморочился с камерами, цветовым профилем и серьезной цветокоррекцией. Либо, если предполагаются маски, которые цветокор убьют, не заострять на этом внимание и взять более простую и мобильную технику.

Видеопродакшену:

Для нормальной цветокоррекции нужно изначально понимать, какая дизайнерская идея заложена. Если предусмотрена маска, то нет смысла снимать в RAW, будет достаточно правильно выставить баланс белого.

Если масок не предполагается, то нужно делать всё наоборот. RAW, плоские профили позволяют получить больше информации в тенях и в дальнейшем дают большой простор колористу.

Как сжимать видео для сайта

Вот кодеки, которые вам понадобятся:

— H.264, H.265;

— VP9;

— AV1.


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


— Как можно меньше цветов
— Как можно больше статичных пикселей


То есть идеальный вариант — черно-белый таймлапс

А теперь посмотрим, на что способны указанные выше кодеки на разных типах исходного видео, и в чём разница. Ради эксперимента мы смонтировали три одинаковых по хронометражу и объёму рандомных ролика. Для удобства назовем их и распишем, до скольки мегабайт их удалось сжать:

  • "Пёстрый". В нём минимум статичных пикселей, много цветов, много перерисовок экрана при выводе на монитор. Объём 14,1 Мб;
  • "Таймлапс". В нём много статичных пикселей, перерисовки экрана не такие глобальные. Объём 11,7 Мб;
  • "Квадрокоптер". Нечто среднее между первыми двумя. Объём 13,1 Мб.

Для самых дотошных — графики с работой кодеков:

Люди в кадре

Дизайнеру:

Живые лица — это хорошо и повышает эмпатию. Но почти всегда элементы управления и текст начинают соприкасаться с изображением человека. Заказчик начинает истерить, что “буквы на лицо залезли” и начинаются пляски с бубнами. Поэтому можно просто взять за правило не использовать в фоновых видео лица людей акцентировано. Давайте коротко и на примере, почему люди в кадре — так себе идея.

Это концепт главной с людьми, которые вроде как заняты делом, но выглядит всё слегка рандомно. 

Этот пример показывает и то, что к выбору сюжета также стоит относиться внимательно. Работающая бухгалтерия ≠ работающий литейный цех.

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

Видеопродакшену:

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

Часто можно обойтись стоками

Ну кстати, да. Если нужно “просто показать производство”, то стоки сгодятся. Если нужно рассказать о конкретном производстве, устроить путешествие по бизнесу, то лучше снять на месте.

Видео и фото в дизайне сайта — годная альтернатива тоннам текста, которые обычно описывают производство и должны в чем-то пользователя убедить. Образы выразительнее рассказов. Поэтому мы используем в дизайне медиа.

Мы в Мэйке любим делать сайты для промышленных брендов, потому что это весело, за них дают награды и платят. В их дизайне используем не только видео, но и 3D и прочие медиа. В следующей статье расскажем, как поженить WebGL, 3D, отдел дизайна и разработки. Тоже с примерами и с ещё большей кучей графиков.

0
34 комментария
Написать комментарий...
Ленар Гильванов

В статье бы добавил уточнений про продакшен:

Про объективы: фокусное расстояние зависит от кроп-фактора матрицы камеры, вы скорее всего приводили на полный кадр. Да и выбор зависит от задачи.

Также широкоугольные объективы имеют описанные проблемы если это недорогие объективы, хорошие имеют только геометрические искажения связанные именно с физическими характеристиками линзы(выпуклостью), но это может быть обоснованно художественной задачей, исключать их не стоит. Особенно для производств, где часто в замкнутом пространстве нужно показывать объекты съемок в общем плане (станки, рабочих работающих на них)

"Частота кадров зависит от концепта —100 FPS нужно нечасто. Достаточно 50-60 FPS"
Частота кадров влияет на естественность движений и возможность замедлить изображение - так называемый слоу-моушен или рапид. 50 можно замедлить в два раза. 100 в 4. Часто съемка на 50-100к/с еще и дает слишком неестественное изображение(движения получаются быстрыми как очень старые съемки фильмов, где приходилось крутить ручку оператору).
Зритель благодаря кино привык к 24-25к/с, 50 и более отлично подходит для спорта и лайва. Это стоит учитывать при съемках и на отдельные сцены выделять какое количество кадров в секунду.

Также бы добавил, что на съемках производств очень нужен режиссер, со своим плейбеком (мониторчиком где он будет смотреть, что получается) тк оператор часто занят тем, что снимает, но не видит картину в целом и на какие-то вещи внимание не обращает. Но тут вопрос в бюджетах.

И еще бы добавил про свет, выделить бюджет под хотя бы два диодных биколорных(могут работать в теплом и холодном спектре) световых прибора. Часто на производствах ужасный дежурный свет, и при съемке людей или деталей его не хватает и все raw и дорогие камеры не справляются или получаем плоскую картинку где объект сливается с фоном.

Также в раскадровке и тз на съемку всегда учитывайте, будет ли инфографика и куда планируется использовать видео, чтобы не перекрывать объект съемки или он не обрезался при интеграции например в сайт.

Статья крутая, если нужен будет подрядчик на создание видео, обращайтесь www.lenargilvanov.com буду рад сотрудничеству.

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

Ленар, спасибо за дополнения)
Приятно, когда в комментах появляются люди, которые делают исходную статью лучше
Про плейбеки подход у нас такой:
- когда снимать приходится прям совсем с колес, то плейбеки часто у оператора и остаются. А режиссер/продюсер по ним проверяют материал на месте, если на ноут заливаться не с руки
- когда же есть простор для минимальной постановки, то плейбек с сендером у режиссера, да. Иногда, когда условия прям позволяют ставим просто монитор от компа. Но это все же история про студийные съемки больше

насчет FPS:
согласен, всё по делу. Но снимаем в 60, чтобы можно было подзамедлить движения людей (процессы все же снимаем в FPS от 100). В конечном материале FPS всегда 24-25 как раз

Ответить
Развернуть ветку
G. Ivan

Душнила)

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Кучкуду
И еще бы добавил про свет, выделить бюджет под хотя бы два диодных биколорных(могут работать в теплом и холодном спектре) световых прибора.

Только не хотя бы, света нужно достаточно, а это значит много, с запасом, тогда даже съемка на телефон будет лучше, чем на RED или ALEXA, которые точно также крашнут картинку на монтаже при недостаточном/неправильном освещении

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

Киноделы на VC ) спасибо за полезнятину!

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Андрей Ямашкин

Все, что необходимо знать начинающему свой пусть Продакшену. Без воды, без купюр, по делу. Респект автору.

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

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

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

Насчет изучения матчасти — в точку. С вами согласен.
Насчет "пожеланий заказчика" - зачем об этом писать, если ради этого и на деньги заказчика все затевается, мы же тут про бизнес, а не про искусство. Ну и в приступе душноты скажу еще, что не "пожеланий", а задачи бизнеса клиента. Из которой уже вытекает коммуникационная задача, а из той — дизайн, а из него — контент.
Насчет отдельно взятой студии: да, все верно, (стоило, видимо повесить дисклеймер "наш опыт"). Это очень кратко наш опыт по предмету, который хоть и неплохо в целом работает, но периодически меняется. Например 3D-продакшен и видеопродакшен не так давно мы интегрировали в отдел дизайна. Как раз, чтобы работа была более бесшовной, без отношений "заказчик-исполнитель" в рамках одного агентства

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

Хоть бизнес-задача, хоть техническое задание, как этот корабль не назови, это так и останется пожеланием клиента, если он не увидит в работе то что он хочет, гарантировано подорвете отношения и ему будет плевать на красивые словесные формы, использованные вами. На фрилансе и череде работ за 11 лет уверился, что чем проще разговариваешь с клиентом, тем лучше, причем в любом плане.
И я говорил о том, что новичок здесь воодушевился единичным опытом, что мягко говоря, не окажет ему чести в будущем

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

1. Техническое задание - это первый этап разработки. Документация на 80-120 листах с кликабельными прототипами, описанием библиотек, компонентов и архитектуры.Как бы это по-простому... ну типа как чертеж при возведении здания.

2. Пожелания клиента - это зачастую разрозненные мнения разных людей, работающих в компании-заказчике. Будешь делать по пожеланиям клиента, получишь проваленный проект, недовольного клиента и дырку в портфеле работ. К нам регулярно приходят клиенты, с которыми пытались работать, слушая пожелания. Их опыта: такие невезучие через 6-12 месяцев идут и переделывают, потому что вместо сайта у них сборник пожеланий, толку от которого ноль

3. А бизнес-задача это бизнес-задача. Это то, какая польза клиенту будет от сайта, как именно сайт эту пользу будет приносит и как эта польза будет конвертироваться в деньги

Ответить
Развернуть ветку
Аксолотль по имени Сальхов

Я бы сказал: если снимаете в помещении с искусственным освещением, забудьте про 60 кадров в секунду (ну и заодно про 30, про 24) - только 25/50/100! Не зря в России и европах тв-стандарт PAL 25 кадров в секунду (а в США NTSC 30) - напряжение у нас в сети переменное, частота 50 Гц. Если снимать в 24/30/60 - фликер, то есть, мерцание, обеспечено.

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

Лайк за годное замечание. Про герцовку, да - забыл написать. Еще бывают приколы с экранами и мониторами, но там уже проще на месте экспериментальным путем подобрать FPS, чтоб не рябило. Та же история, если снимать на щите управления электростанцией например

Ответить
Развернуть ветку
Яков Сомов

герцовка - это то, через что должен пройти каждый ))

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

Видео-фон не замедляет загрузку сайта?
Ещё, возможно, странный вопрос, но можно ли как-то учитывать скорость клиента и на основе этого менять html, что надо гуглить? Например, у посетителя медленное соединение - ставим картинку на фон, быстрое соединение - видео.

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

Краткий ответ: сильно не замедляет, но есть нюансы

Подробный ответ: для загрузки видео браузеры используют протокол HLS (HTTP Live Streaming) — весь видеопоток разбивается на небольшие «кусочки», которые затем скачиваются при помощи последовательных запросов к серверу. Этот процесс происходит независимо от загрузки других ресурсов, поэтому для небольших видео общая скорость загрузки страницы не должна заметно пострадать.

Однако, нужно учитывать, что на устройстве пользователя может не поддерживаться аппаратное ускорение для выбранного кодека видео, и декодирование будет происходить на процессоре, а не видеокарте — возможно заметное «проседание» FPS при загрузке страницы, особенно если она нагружена другими ресурсами (скриптами, которые обрабатываются в основном потоке браузера, изображениями и т.д.)

Поэтому для фоновых видео, которые сразу не видны при загрузке страницы, разумнее использовать «отложенную» загрузку, как, например, показано в этой статье (https://web.dev/lazy-loading-video/). Также при возможности лучше всегда кодировать видео таким образом, чтобы его moov atom был в самом начале файла (для ffmpeg это опция -movflags +faststart) — это позволит браузеру сразу получить важную информацию о видео (например, его длительность), не дожидаясь его полной загрузки.

Насчет вопроса о замене видео на статичное изображение для медленного соединения: Dmitriy Zorin предложил хороший вариант.

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

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

Как вариант использовать Performance Timing API: https://developer.mozilla.org/ru/docs/Web/Performance/Navigation_and_resource_timings

И на основе данных о скорости загрузки страницы запрашивать изображение или видео.

Ответить
Развернуть ветку
Неопознанный Енот
>Видеоспот таким образом замыкается в петлю.

«Замыкается в петлю» - элегантный дисфемизм для рабочего «залупливается». копирайтер для текста на vc: «замкнуть в петлю видеоспот», монтажер: «залупить видео», приступаю

Ответить
Развернуть ветку
Профессиональный Мурод

Топ

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

Поставил лайк за классное видео с завода

Ответить
Развернуть ветку
Жертва стартапа

лайк за крутую статью, это круто

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

Мерси

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

Сразу в закладки. Спасибо)

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

Спасибо, изучу

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

Вот если бы все люди были такие рассудительные как вы, то мы бы жили хорошо (но скучно).
Спасибо за статью!

Ответить
Развернуть ветку
Александра Пудина

Очень круто, с "подводными камнями" и "мясом". Просто огонь.

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

Какой битрейд для фонового видео?

Ответить
Развернуть ветку
Агентство МЭЙК
Автор

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

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

Зачетный сайт но веб студия однотипные штампует

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

Лично мне противно, когда интернет напоминает интерактивный телевизор.

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

этот формат визуальных абстракций и подачи подходит для сферы деятельности их заказчиков и их аудитории

очень сильные работы

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

а однотипные лендинги с awesome-иконками реально достали уже, которые как правило бедные по графике интерфейсов и палитре, да и шрифты редко нормальные используются

личное мнение

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

Всё очень круто, осталось понять, сколько всё это стоит :)
Если не нарушает NDA, подскажите порядок цифр, сколько стоило видео из заголовка?

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

не хватает части со стороны фронта - каким образов вставлять это всё и как учитываются разные браузеры и девайсы.

сколько себя помню - насколько бы современный мак у меня не был такие видео фоны всегда на нем тормозят. отчасти потому что всегда открыта сотня вкладок... или как сильно такое будет загружать батарею телефона? и вообще нужно ли? может удобство использования всё же важнее видеофона? Хотя если вам важнее получить награду то вопросов ноль))

Ответить
Развернуть ветку
Читать все 34 комментария
null