какие форматы видео поддерживают прозрачный фон
Как сделать фон на видео прозрачным и затем правильно экспортировать его в редакторе VSDC
Готовые видео с прозрачным фоном удобно использовать для создания необычных эффектов, переходов, а также шаблонов интро и заголовков, которые можно размещать поверх других видео.
В этой инструкции мы покажем, каким образом можно сделать фон видео прозрачным и как аналогичным образом экспортировать GIF с прозрачным фоном, используя бесплатный редактор VSDC. Скачать VSDC вы можете здесь.
Прежде чем начать, разберём два часто задаваемых вопроса.
Что значит «видео с прозрачным фоном»?
Нередко начинающие пользователи спрашивают нас, как вообще прозрачный фон на видео возможен с технической точки зрения. Самое частое заблуждение заключается в том, что прозрачным можно сделать фон абсолютно любого видео, просто удалив нежелательные объекты. Но так это не работает.
Единственный реальный способ сделать фон на видео прозрачным – это использовать зелёный фон во время съёмок, а затем удалить его с помощью инструмента под названием Хромакей. Эта возможность доступна во многих видеоредакторах. Однако, как правило, заменой удалённому фону служит новое изображение или видео. В нашем случае, необходимо будет сохранить видео с «отсутствием» фона.
Такое же правило действует и для файлов в формате GIF: загрузить в редактор, удалить фон, корректно экспортировать.
Какие форматы видео поддерживают прозрачность?
Это ещё один ключевой вопрос. Самая распространённая ошибка в процессе сохранения видео с прозрачным фоном – это некорректный выбор формата.
Дело в том, что большинство форматов и кодеков прозрачность не поддерживают. Чтобы сохранить прозрачность, на экспорте необходимо выбрать MOV с кодеком без потери качества PNG. Второй вариант экспорта – это уже упомянутые выше GIF.
Теперь, когда мы разобрались с деталями, перейдём к инструкции. Если у вас под рукой нет видео, снятого на зелёном фоне, для практики можно скачать бесплатные стоковые ролики с сайтов Videvo или Pexels.
Как сделать фон видео прозрачным в редакторе VSDC
Шаг 1. Запустите VSDC и используйте кнопку Импортировать контент на стартовом экране. Затем через проводник добавьте видео с зелёным фоном с компьютера.
Шаг 2. В открывшемся окне «Настройки проекта», найдите строку Прозрачность и выставите 0%. Нажмите «Принять».
Шаг 3. Откройте меню Видеоэффекты, перейдите к опции Прозрачность >> Удаление фона. Во всплывшем окне нажмите Ok.
Шаг 4. Если вокруг объекта осталась «обводка» зелёного цвета, перейдите в Окно свойств справа и попробуйте вручную увеличивать значения параметров Порог минимальной яркости и Порог минимальной цветности до тех пор, пока зелёный цвет полностью не исчезнет. Более детально мы описали этот процесс в инструкции по удалению зелёного фона из видео.
Шаг 5. После того, как вы удалили зелёный фон, откройте вкладку Экспорт проекта. В меню, расположенном в верхнем левом углу, выберите PC. В меню, расположенном правее, выберите формат MOV. Затем нажмите кнопку «Изменить профиль» под окном предпросмотра видео. Вам откроется меню настройки профиля видео. В разделе Параметры видео, выберите видеокодек под названием PNG lossless. Наконец, нажмите «Применить» и экспортируйте проект.
Вот и всё. Теперь вы знаете, как корректно сохранить видео с прозрачным фоном. В дальнейшем, вы сможете размещать его поверх других роликов и изображений, растягивать и сжимать в размере, а также применять любые эффекты.
Для создания GIF с прозрачным фоном, логика действий будет совпадать с теми шагами, которые мы только что описали. Если у вас уже готовая GIF с зелёным фоном, то вам следует полностью повторите вышеописанную инструкцию. Если же вы хотите из видео с зелёным фоном сделать GIF с прозрачным фоном, просто выберите формат Web >> GIF на этапе экспорта проекта.
В качестве завершения нашей инструкции, мы хотели бы показать вам ещё один приём создания видео с прозрачным фоном. Возможно, он пригодится для вашего проекта.
Как создать анимированный текст на прозрачном фоне
Выше мы описали, как удалить зелёный фон из видео, чтобы получить в результате прозрачность. В следующей части инструкции мы покажем, как с нуля создать простое интро на прозрачном фоне.
Допустим, вам необходимо создать анимированный заголовок и сохранить его с прозрачным фоном, чтобы затем размещать анимацию в готовом виде, а не создавать каждый раз с нуля.
Осуществить это можно следующим образом:
Шаг 1. Запустите VSDC и используйте кнопку Пустой проект на стартовом экране. В открывшемся окне Настройки проекта, найдите строку Прозрачность и выставите 0%. Нажмите «Принять».
Шаг 2. Нажмите кнопку добавления текста (T) из меню с левой стороны, создайте заголовок и откорректируйте его стиль в меню для работы с текстом, открывшемся в верхней части интерфейса.
Совет: поскольку вы задали прозрачный фон с самого начала проекта, работать с текстом может быть визуально сложно. Для удобства, мы советуем добавить на сцену фигуру прямоугольника и залить её цветом, который будет контрастен заголовку. На таймлайне его нужно будет разместить под слоем заголовка. Таким образом, вам будет визуально легче отслеживать изменения, а перед экспортом проекта, вы можете просто удалить прямоугольник и оставить фон прозрачным, как и было задумано.
Шаг 3. Сделайте двойной щелчок по слою текста на таймлайне и используйте иконку добавления движения в меню слева. Затем разместите вектор движения в точке, куда должен двигаться заголовок.
Шаг 4. Вы можете применить любые эффекты перехода к текстовому объекту, чтобы сделать его появление (и исчезание) более плавным. Например, для иллюстрации выше использован эффект перехода «Диффузия». Чтобы применить его, щёлкните правой кнопкой мыши по слою текста на таймлайне, выберите Видеоэффекты >> Эффекты перехода >> Диффузия.
Шаг 5. Как только интро будет готово, перейдите во вкладку Экспорт проекта и сохраните файл в формате MOV с использованием кодека PNG lossless, по аналогии с тем, как это было описано в инструкции выше.
Освоив основные принципы работы с текстом и движением в VSDC, вы сможете создать интро любой сложности и, если необходимо, сохранить его на прозрачном фоне для дальнейшего использования. Ищете вдохновения? Посмотрите видеоинструкции по созданию стильных интро на канале VSDC!
Прозрачный фон в After Effects
Введение в прозрачный фон в After Effects
Как создать прозрачный фон в After Effects?
Шаги по созданию прозрачного фона
Шаг 3: Создайте новую композицию, нажав на Композиция, присутствующая в строке меню вверху.
Шаг 6: Чтобы получить сетку прозрачности, вам просто нужно нажать на Toggle Transparency Grid, которая присутствует рядом с выпадающим списком активной камеры, как показано ниже.
Шаг 7: Нажмите один раз, и вы получите сетку прозрачности. Если вы нажмете еще раз, вы снова получите сплошной черный цвет. Таким образом, вы можете получить сетку прозрачности для вашей композиции.
Шаг 8: Теперь создайте T ext и поместите его в центр, используя инструмент «Выделение». Это видео с текстом будет использоваться в другом видео, чтобы показать, как работает прозрачный фон в After Effects.
Шаг 10 : Перетащите текст вверх и вниз с помощью индикатора текущего времени, чтобы анимировать его, чтобы перемещаться вверх и вниз.
Шаг 11: анимация завершена для текста в этом видео.
Шаг 14: Установите очередь рендеринга в лучших настройках .
Шаг 15: Выберите параметры рендеринга в качестве лучших параметров с полным разрешением и дисковым кэшем только для чтения. На выходе модуль гарантирует, что он без потерь. Откройте настройки, нажав на без потерь. Вы получите всплывающее окно. Вы можете выбрать любой формат, который вы пожелаете. Выберите каналы как RGB + Alpha в разделе видео выхода.
Шаг 16: Теперь скачайте ваше видео, сохраните его на рабочем столе и нажмите кнопку рендеринга.
Ваше видео с прозрачным фоном и текстом готово.
Шаг 17: Теперь перетащите любое видео на панель инструментов проекта, как показано ниже.
Шаг 18. После перетаскивания видео импортируйте видеофайл с сохраненным ранее текстом, а затем перетащите его в это видео.
Шаг 19: Как только вы сделаете это, вы увидите текст с прозрачным фоном в этом видео, а когда вы переместите индикатор текущего времени, вы увидите анимацию, которую мы сделали с текстом.
Вывод
С помощью шагов, упомянутых выше, можно отобразить видео с прозрачным фоном в Adobe After Effects. Что касается анимации и видео, файлы, которые можно импортировать и экспортировать, представляют собой Animated GIF (GIF), 3GPP (3GP, 3G2, AMC), Open Media Framework (OMF), DV, видео для Windows (AVI) и QuickTime (MOV). ).
К видеофайлам, которые можно импортировать, относятся только Adobe Flash Video (FLV, F4V), Adobe Flash Player (SWF), формат обмена мультимедиа (MXF), AVCHD (M2TS), MPEG-1 (MPG, MPE, MPA, MPV, MOD). ), MPEG-4 (MP4, M4V), MPEG-2 (MPG, M2P, M2V, M2A, M2T), XDCAM HD / XDCAM EX (MXF, MP4) и Windows Media (WMV, WMA). Хотя After Effects может работать с 16 и 32 битами на канал, многие кодеки и форматы анимационных и видеофайлов поддерживают только 8 бит на канал.
Рекомендуемые статьи
Объявление
Как в Moho (Anime Studio) cохранить видео с альфа каналом (прозрачный фон)?
Эх, действительно, пора наконец-то ответить на этот вопрос четко и однозначно!
В Anime Studio есть три возможных вида экспорта:
— Векторный экспорт в формат SWF
— Растровый экспорт в видео-файл
— Растровый экспорт в серию картинок (секвенцию)
Прозрачность фона SWF-файлов настраивается на уровне проигрывателя. Поэтому настройки экспорта Anime Studio в этом случае особого значения не имеют.
Экспорт в видео-файл
Естественно, что именно эту опцию и нужно указать при экспорте. 
Примеры кодеков, поддерживающих альфа-канал: Animation, PNG, None (без сжатия), JPEG 2000, и т.д.
Учтите, что для экспорта в MOV у вас должен быть установлен QuickTime. Скачать его можно здесь: http://www.apple.com/quicktime/download/
Можно рендерить и в AVI с альфой, но у многих программ бывают проблемы с пониманием таких видео. У MOV с альфой подобных проблем обычно нет.
Экспорт в секвенцию картинок
При этом виде экспорта, чтобы получить прозрачный фон, вам достаточно просто выбрать формат, поддерживающий альфа канал (PNG или PSD).
ВАЖНОЕ ПРИМЕЧАНИЕ!
В опциях экспорта в Anime Studio присутствует настройка Do not premultiply alpha channel (Не предумножать альфа-канал):
Могу ли я иметь видео с прозрачным фоном, используя тег HTML5?
Мы сняли представителя на зеленом экране и подготовили видеофайлы в нескольких форматах.
8 ответов
Да, такого рода вещи возможны без Flash:
Тем не менее, только очень современные браузеры поддерживают видео HTML5, и это следует учитывать при развертывании в HTML 5, и вам следует предоставить запасной вариант (возможно, Flash или просто пропустить прозрачность).
Chrome 30> поддерживает альфа-прозрачность видео.
Нет. Это ограничение видеокодеков, поддерживаемых браузерами: mp4, ogv и webm в настоящее время не поддерживают альфа-каналы.
В настоящее время единственным видеокодеком, который действительно поддерживает альфа-канал, является VP8, который использует Flash. MP4, вероятно, поддержал бы его, если бы видео экспортировалось как последовательность изображений, но я вполне уверен, что видеофайлы Ogg вообще не поддерживают альфа-канал. Это может быть один из тех редких случаев, когда использование Flash поможет вам лучше.
Файлы Mp4 можно воспроизводить на прозрачном фоне с помощью библиотеки seeThrou Js. Все, что вам нужно, чтобы объединить фактическое видео и альфа-канал в одном видео. Также убедитесь, что размер видео не превышает 1400 пикселей, так как некоторые старые устройства iphone не воспроизводят видео размером более 2000. Это очень полезно для настольных и мобильных устройств safari, которые в настоящее время не поддерживают webm.
более подробную информацию можно найти по ссылке ниже https://github.com/m90/seeThru
QuickTime Movs экспортируется как анимация, но только в сафари. Мне бы хотелось, чтобы было полное решение (или формат), охватывающее все основные браузеры.
Альфа-прозрачность в видео HTML5
Те кто работает с видео в интернете, знают, что браузер Chrome воспроизводит видео HTML5 в формате WebM. Теперь браузер Chrome поддерживает альфа-прозрачность видео HTML5 в формате WebM.
Другими словами, Chrome принимает во внимание альфа-канал, когда воспроизводится видео оно кодируется в WebM с альфа-каналом. Это означает, что на веб-странице вы можете воспроизводить видео с прозрачным фоном, который может быть изображение или даже другие видео.
Как сделать прозрачность в видео
Метод использует открытый исходный код и инструменты Blender FFmpeg:
1. Сделать зеленый фон в видео
Прежде всего, необходим объект с фоном одного цвета, что бы потом фон можно было удалить или сделать прозрачным.
Самый простой способ сделать это, добавить объект в видео перед цветом фона. Наиболее часто используется зеленый или синий цвет, зависит от тона кожи человека.
Есть интересное видео-руководство онлайн как это происходит: вот первое вот второе видео в съемках видео зеленый экран (также известный как Chrom Key). Если нет зеленой ткани, Вы можете нарисовать фон акриловой краской, она не воняет.
Фильм Великий Гэтсби показывает, сколько возможностей с зеленым и синим фоном.
Советы для съемок с фоном для прозрачности:
2. Отделить видео от фона
Следующие шаги описывают один способ создания сырого видео с альфа-прозрачностью:
3. Кодировать видео в WebM с альфа-прозрачностью
Сырое видео с альфа-прозрачностью, можно закодировать в WebM двумя способами.
4. Воспроизведение WebM с альфа-прозрачностью в Chrome
Чтобы воспроизвести файл видео WebM с альфа-прозрачностью в Chrome, просто установите файл как элемент видео HTML5. В настоящее время, VP8 альфа воспроизведение находится в дополнениях, Вы должны включить его в about:flags и установить —enable-vp8-alpha-playback при запуске Chrome. Когда флаг установлен, альфа воспроизведения также будут работает с MediaSource.
Список, что можно сделать с видео HTML5
Развитие технологии HTML5 не стоит на одном месте вот список, что можно сделать с видео HTML5 и он с каждым годом увеличивается.
Заключение
Можно придумать множество интересных случаев использования для видео альфа-прозрачность: игры, интерактивное видео, подстава (добавить свои собственные видео для фона видео), видео с альтернативными символами или изображениями, веб-приложения которые используют компоненты наложения видео …
Поделитесь со мной в комментариях своим видео с альфа-прозрачностью.
Параметр wmode в значении transparent. Скорее всего, это будет примерно так: