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

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

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

Демо

На данный момент это работает только в Chrome Canary, для Google Chrome вы должны будете включить альфа-прозрачность на странице chrome://flags.

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

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

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

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

к меню ↑

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

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

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

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

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

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

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

Отделить видео от фона

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

  1. После того как вы сняли видео на зеленом фоне, используйте инструмент с открытым исходным кодом Blender, чтобы преобразовать видео в массив файлов PNG с прозрачностью. Используйте манипуляции с цветом в Blender, чтобы удалить зеленый фон и сделать его прозрачным. (Заметим, что PNG не является обязательным: подходит любой формат, который сохраняет данные альфа-канала.)
  2. Преобразовать массив файлов PNG для сырого видео 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 с прозрачностью

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

  1. В FFmpeg мы добавили поддержку FFmpeg кодировать видео в WebM альфа. Использовать 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 с прозрачностью

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

к меню ↑

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

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

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

Заключение

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

Поделитесь со мной в комментариях своим видео с альфа-прозрачностью.