reproducir - ¿Puedo tener un video con fondo transparente usando una etiqueta de video HTML5?

insertar video en html5

Question

Filmamos a un vocero en una pantalla verde y tenemos los archivos de video listos en múltiples formatos.

Con Flash podríamos usar el wmode transparente dentro de las etiquetas param e incrustadas, pero ¿hay algo similar a esto con el video y las etiquetas de origen en HTML5? ¿Es posible incluso guardar videos .m4v o .ogv correctamente para que podamos reproducir estos archivos con fondos transparentes en nuestros navegadores?

Gracias

Answer 1

Chrome 30> admite la transparencia de video alfa.

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

Answer 2

El formato webm es la mejor solución para Chrome> 29, pero no es compatible con Firefox IE y Safari, la mejor solución es usar Flash (wmode = "transparent"). pero tienes que olvidar "ios".

Answer 3

En este momento, el único códec de video que verdaderamente admite un canal alfa es VP8, que usa Flash. MP4 probablemente lo admitiría si el video se exportara como una secuencia de imágenes, pero estoy bastante seguro de que los archivos de video Ogg no tienen soporte alguno para un canal alfa. Esta podría ser una de esas raras instancias en las que seguir con Flash te serviría mejor.

Answer 4

Movs Quicktime exportados como trabajo de animación pero solo en safari. Ojalá hubiera una solución completa (o formato) que cubriera todos los principales navegadores.

Answer 5

No. Esta es una limitación de los códecs de video admitidos por los navegadores: mp4, ogv y webm no admiten canales alfa actualmente.

Hay soluciones, pero implican volver a renderizar el video utilizando Canvas y es una especie de truco. seeThru es un ejemplo. Funciona bastante bien en navegadores de escritorio HTML5 (incluso IE9) pero no parece funcionar muy bien en dispositivos móviles. No pude hacer que funcionara en Chrome para Android. Sí funcionó en Firefox para Android, pero con un framerate bastante malo. Creo que es posible que no tenga suerte para el móvil, aunque me gustaría que se demuestre lo contrario.

Answer 6

Sí, este tipo de cosas es posible sin Flash:

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

Sin embargo, solo los navegadores más modernos admiten videos HTML5, y esta debería ser tu consideración cuando se implemente en HTML 5, y deberías proporcionar un respaldo (probablemente Flash u omitir la transparencia).

Answer 7

Si bien esto no es posible con el video en sí, puede usar un lienzo para dibujar los marcos del video, excepto los píxeles en un rango de colores o lo que sea. Tomaría algunos javascript y por supuesto. Vea Video Puzzle (aparentemente roto en este momento), Exploding Video y Realtime Video -> ASCII