Альфа-прозрачность в видео 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). Если нет зеленой ткани, Вы можете нарисовать фон акриловой краской, она не воняет.

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

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

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

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>