Прозрачный фон в видео

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

Демо

Сделать прозрачный фон в видео

Методы используют открытый исходный код и инструмент Blender FFmpeg:

  1. Объекты видео на переднем плане с зеленым или синим цветом фона.
  2. Процесс обработки видео с прозрачностью.
  3. Кодировать видео в формат (в данном случае WebM).

Есть также специализированные программы, например Adobe After Effects, возможно кому то будет проще с ним.

Зеленый фон в видео

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

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

Есть интересное видео-руководство как это происходит: вот первое и вот второе видео, в видео зеленый фон (известный как Chrom Key). Если нет зеленой ткани, Вы можете нарисовать фон акриловой краской, она не воняет.

Фильм Великий Гэтсби показывает, сколько возможностей с зеленым и синим фоном.

Советы для съемок с фоном для прозрачности:

  • Убедитесь, что ваш объект, одежда или предметы, отличаются от цвета фона, потому что будут пятна в конечном видео. Даже небольшие логотипы на одежде или ювелирные изделия могут быть проблемой.
  • Использовать последовательное, равномерное освещение, что бы из бежать тень и лишний цвет на фоне.
  • Использовать немного рассеянный свет, поможет избежать тени и изменение цвета фона.
  • Избегайте блестящих фонов: используйте матовую поверхность она лучше рассеивает свет.

Отделить объект от фона

Следующие шаги описывают способ создания сырого видео с прозрачностью:

  1. После того как вы сняли видео на зеленом фоне, для преобразования видео в массив файлов PNG с прозрачностью, используйте инструмент Blender. Используйте манипуляции с цветом в Blender, чтобы удалить зеленый фон и сделать его прозрачным. PNG не является обязательным: подходит любой формат, который поддерживает прозрачность.
  2. Для сырого видео YUVA используйте инструмент FFmpeg: ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw, кодируя файлы непосредственно в формат WebM, используя для этого команду FFmpeg: ffmpeg -i image%04d.png output.webm. Если вы хотите добавить аудио, вы можете использовать FFmpeg mux: ffmpeg -i image%04d.png -i audio.wav output.webm

Конвертировать видео с прозрачностью

Сырое видео с прозрачностью, можно конвертировать в формат WebM двумя способами.

  1. В инструменте FFmpeg добавить поддержку видео в формате WebM с альфа-каналом. Кодирование будет автоматически сделано в правильном формате в соответствии со спецификацией.  Убедитесь, что вы используете последнюю версию FFmpeg для этого. Пример команды: FFmpeg -i myAlphaVideo.webm output.webm
  2. Можно использовать инструмент WebM: с http://git.chromium.org/webm/libvpx.git. WebM-Tools представляет собой набор простых инструментов связанные с WebM, в том числе инструмент для создания видео WebM с альфа-прозрачностью. Запустите двоичный фай, чтобы увидеть список опций, поддерживаемых для alpha_encoder.

Воспроизведение видео с прозрачностью

Чтобы воспроизвести файл видео WebM с прозрачностью в Chrome, просто установите файл как элемент видео HTML5. В настоящее время, VP8 альфа воспроизведение находится в дополнениях, about:flags и установить —enable-vp8-alpha-playback. Когда флаг установлен, видео также будет работает с MediaSource.

Что еще можно сделать с видео

Развитие технологии HTML5 не стоит на одном месте вот список, что можно сделать с видео HTML5.

  1. TTML-1.0 и WebVTT — Титры в видео HTML5
  2. Media Source API — видео фрагментами
  3. PageVisibility API — автоматическая остановка и воспроизведения видео
  4. getUserMedia — захват аудио и видео
  5. HTML5 video — добавление закладок в видео

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

автор HTML 1130
htmlhook.ru | Скрипты для веб-приложений