Могу ли я иметь видео с прозрачным фоном, используя тег HTML5?

Question

Мы сняли представителя на зеленом экране и подготовили видеофайлы в нескольких форматах.

С помощью Flash мы могли бы использовать прозрачный wmode внутри тегов param и embed, но есть ли что-то похожее с тегами video и source в HTML5? Можно ли вообще сохранять видео .m4v или .ogv, чтобы мы могли воспроизводить эти файлы с прозрачным фоном в наших браузерах?

Спасибо

Answer 1

Да, такого рода вещи возможны без Flash:

• http://hacks.mozilla.org/2009/06/tristan-washing-machine/
• http://jakearchibald.com/scratch/alphavid/

Однако толькоочень современные браузеры поддерживают видео HTML5, и это следует учитывать при развертывании в HTML 5, и вы должны предоставить запасной вариант (возможно, Flash или просто пропустите прозрачность).

Answer 2

Chrome 30> поддерживает альфа-прозрачность видео.

http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video

Answer 3

Нет. Это ограничение видеокодеков, поддерживаемых браузерами: mp4, ogv и webm в настоящее время не поддерживают альфа-каналы.

Есть обходные пути, но они включают повторную визуализацию видео с использованием Canvas, и это своего рода хак. seeThru является одним примером. Он хорошо работает в браузерах HTML5 для настольных компьютеров (даже в IE9), но, похоже, не очень хорошо работает на мобильных устройствах. Я не мог заставить его работать на Chrome для Android. Он работал на Firefox для Android, но с довольно паршивой частотой кадров. Я думаю, вам не повезло с мобильным телефоном, хотя я бы хотел оказаться неправым.

Answer 4

Хотя это невозможно с самим видео, вы можете использовать холст для рисования кадров видео, за исключением пикселей в цветовой гамме или чего-либо еще. Это займет немного javascript и так далее, конечно. См. Видео-головоломка (очевидно, в данный момент не работает), Взрывающееся видео и Видео в реальном времени -> ASCII

Answer 5

В настоящее время единственным видеокодеком, который действительно поддерживает альфа-канал, является VP8, который использует Flash. MP4, вероятно, поддержал бы его, если бы видео экспортировалось как последовательность изображений, но я вполне уверен, что видеофайлы Ogg вообще не поддерживают альфа-канал. Это может быть один из тех редких случаев, когда использование Flash поможет вам лучше.

Answer 6

Mp4-файлы можно воспроизводить на прозрачном фоне, используя библиотеку seeThrou Js. Все, что вам нужно, чтобы объединить фактическое видео и альфа-канал в одном видео. Также убедитесь, что размер видео по высоте не превышает 1400 px, поскольку некоторые старые устройства iphone не воспроизводят видео с размерами более 2000. Это очень полезно для настольных и мобильных устройств safari, которые в настоящее время не поддерживают webm.

более подробную информацию можно найти по ссылке ниже https://github.com/m90/seeThru

Answer 7

QuickTime Movs экспортируется как анимация, но только в сафари.Мне бы хотелось, чтобы было полное решение (или формат), охватывающее все основные браузеры.

Answer 8

формат webm - лучшее решение для Chrome> 29, но он не поддерживается в Firefox IE и Safari, лучшее решение - использовать Flash (wmode = "transparent"). но вы должны забыть "IOS".