Те кто работает с видео в интернете, знают, что браузер Chrome воспроизводит видео HTML5 в формате WebM. Теперь браузер Chrome поддерживает альфа-прозрачность видео HTML5 в формате WebM.
Другими словами, Chrome принимает во внимание альфа-канал, когда воспроизводится видео оно кодируется в WebM с альфа-каналом. Это означает, что на веб-странице вы можете воспроизводить видео с прозрачным фоном, который может быть изображение или даже другие видео.
На данный момент это работает только в Chrome Canary, для Google Chrome вы должны будете включить альфа-прозрачность на странице chrome://flags.
Как сделать прозрачность в видео
Метод использует открытый исходный код и инструменты Blender FFmpeg:
- Объект фильма на переднем плане с одним зеленым цветом фона.
- Процесс обработки видео с неподвижным изображением PNG с прозрачностью данных.
- Кодировать в формат видео (в данном случае, WebM).
Есть также специализированные программы, чтобы сделать такое видео, например Adobe After Effects, возможно кому то будет проще с ним.
1. Сделать зеленый фон в видео
Прежде всего, необходим объект с фоном одного цвета, что бы потом фон можно было удалить или сделать прозрачным.
Самый простой способ сделать это, добавить объект в видео перед цветом фона. Наиболее часто используется зеленый или синий цвет, зависит от тона кожи человека.
Есть интересное видео-руководство онлайн как это происходит: вот первое вот второе видео в съемках видео зеленый экран (также известный как Chrom Key). Если нет зеленой ткани, Вы можете нарисовать фон акриловой краской, она не воняет.
Фильм Великий Гэтсби показывает, сколько возможностей с зеленым и синим фоном.
Советы для съемок с фоном для прозрачности:
- Убедитесь, что ваш объект, одежда или предметы, отличаются от цвета фона, потому что будут пятна в конечном видео. Даже небольшие логотипы на одежде или ювелирные изделия могут быть проблемой.
- Использовать последовательное, равномерное освещение, что бы из бежать тень, и лишний цвет на фоне, который при впоследствии мы должны сделать прозрачным.
- Использовать немного рассеянный свет, поможет избежать тени и изменение цвета фона.
- Избегайте блестящих фонов: используйте матовую поверхность она лучше рассеивает свет.
2. Отделить видео от фона
Следующие шаги описывают один способ создания сырого видео с альфа-прозрачностью:
- После того как вы сняли видео на зеленом фоне, используйте инструмент с открытым исходным кодом Blender, чтобы преобразовать видео в массив файлов PNG с прозрачностью. Используйте манипуляции с цветом в Blender, чтобы удалить зеленый фон и сделать его прозрачным. (Заметим, что PNG не является обязательным: подходит любой формат, который сохраняет данные альфа-канала.)
- Преобразовать массив файлов PNG для сырого видео YUVA используйте инструмент с открытым кодом FFmpeg:
ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw
Альтернативно кодировать файлы непосредственно в WebM, используя команду FFmpegffmpeg -i image%04d.png output.webm
Если вы хотите добавить аудио, вы можете использовать FFmpeg mux, команда:ffmpeg -i image%04d.png -i audio.wav output.webm
3. Кодировать видео в WebM с альфа-прозрачностью
Сырое видео с альфа-прозрачностью, можно закодировать в WebM двумя способами.
- В FFmpeg: мы добавили поддержку FFmpeg кодировать видео в WebM альфа. Использовать FFmpeg с видеовходом включая альфа данные, установить выходной формат WebM, и кодирование будет автоматически сделано в правильном формате в соответствии со спецификацией. Убедитесь, что вы используете последнюю версию FFmpeg для этой работы.Пример команды:
FFmpeg -i myAlphaVideo.webm output.webm
- Можно использовать инструменты 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 и он с каждым годом увеличивается.
- TTML-1.0 и WebVTT — Титры в видео HTML5
- Media Source API — WebM видео фрагментами
- PageVisibility API — автоматическая остановка и воспроизведения видео
- getUserMedia — обмен веб-страницами
- 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&apercu=http%3A%2F%2Fflash.webestools.com%2Fflv_player%2Fextract_elephant_dream.png" type="application/x-shockwave-flash"></embed>