Альфа-прозрачность в видео HTML5

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

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

ДЕМО

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

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

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

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

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

1. Сделать зеленый фон в видео

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

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

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

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

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

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

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

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

  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

3. Кодировать видео в 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.

4. Воспроизведение WebM с альфа-прозрачностью в Chrome

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

Список, что можно сделать с видео HTML5

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

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

Заключение

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

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

источник

Как встроить в сайт .flv видео с прозрачным фоном?

Параметр wmode в значении transparent. Скорее всего, это будет примерно так:

<embed src="адрес_проигрывателя.swf" type="application/x-shockwave-flash" wmode="transparent" flashvars="тут_параметры_с_передачей_адрес_видео.flv"></embed>

или такой пример с плеером:

<embed src="http://flash.webestools.com/flv_player/v1_28.swf" width="720" height="405" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" flashvars="fichier=http%3A%2F%2Fflash.webestools.com%2Fflv_player%2Fextract_elephant_dream.flv&amp;apercu=http%3A%2F%2Fflash.webestools.com%2Fflv_player%2Fextract_elephant_dream.png" type="application/x-shockwave-flash"></embed>