Vídeo HTML5

El video HTML5 es un elemento introducido en la especificación HTML5 con el objetivo de abrir nuevos estándares en la reproducción de películas y videos, todos los cuales reemplazan al elemento<object> .

Esto significa que los navegadores compatibles con HTML5 no necesitan reproductores propietarios (como Adobe Flash Player ) para reproducir videos incrustados a través de la etiqueta <video>.

Este estándar se ve obstaculizado por la falta de acuerdo sobre qué formatos de video deberían admitirse oficialmente.

Especificaciones

HTML5 proporciona una serie de atributos que se agregarán a la etiqueta de apertura <video>para indicarle al navegador si debe usar ciertas funciones y cómo hacerlo:

Se puede insertar texto entre las etiquetas de apertura ( <video>) y cierre ( ) que los navegadores que no admiten HTML5 mostrarán en lugar del video.</video>

El siguiente fragmento de código HTML5 inserta un video en formato WebM en la página y muestra el uso de los atributos vistos anteriormente (en el ejemplo se muestran todos, en realidad solo se insertan los deseados).

<video src = "example.webm" width = "720" height = "576" poster = "immagine.jpg" controla la precarga del bucle de reproducción automática = "auto" silenciado> Este texto se muestra si el navegador no es compatible con HTML5. </vídeo>

Formatos de video compatibles

Las reglas actuales de HTML5 no especifican qué formatos de video deben admitir los navegadores en la etiqueta de video. Por lo tanto, hasta la fecha pueden admitir cualquier formato que sus desarrolladores consideren apropiado.

Debate sobre el formato único

el grupo de trabajo de HTML5 cree que es preferible que haya un solo formato de video que sea compatible con todos los navegadores. El formato ideal debería:

Theora fue originalmente el estándar de video recomendado para HTML5, ya que no está sujeto a ninguna patente conocida. Sin embargo, el 10 de diciembre de 2007, se cambió el borrador de HTML5, reemplazando la referencia a Theora:

"Los programas deben ser compatibles con Theora video y Vorbis audio , así como con el formato de contenedor Ogg ".

con:

“Es útil para la interoperabilidad si todos los navegadores admiten los mismos códecs. Sin embargo, no se conoce ningún códec que funcione con todos los reproductores existentes actualmente: se necesita un códec que no requiera pago de licencias, que sea compatible con el modelo de desarrollo de código abierto , que tenga la calidad suficiente para ser utilizado y que no no existen riesgos potenciales ocultos de patentes para las empresas. Esta sección se actualizará tan pronto como haya nueva información disponible".

Aunque Theora no está sujeta a ninguna patente conocida, empresas como Apple y Nokia están preocupadas por la posibilidad de patentes ocultas, cuyos propietarios pueden estar esperando que una gran empresa utilice el formato y luego reclame el pago de las licencias. Apple , Microsoft y otras empresas poseen las patentes del principal rival, el formato H.264 .
Se ha criticado la eliminación del formato Ogg de la especificación, ya que no hay razón para suponer que Theora está sujeta a patentes "ocultas", ni es posible determinar que también existen patentes "ocultas" en el caso de H.264. .

Apple también se opuso al uso del formato Ogg en el estándar HTML (que de todos modos no es obligatorio) argumentando que muchos dispositivos admiten otros formatos mucho más fácilmente y que HTML nunca ha impuesto el uso de un determinado formato en nada.

H.264/MPEG-4 AVC es más utilizado y tiene buena velocidad, compresión, decodificador de hardware y calidad de video, pero está protegido por patentes. Excepto en casos especiales, los usuarios de H.264 deben pagar derechos de licencia a MPEG LA , un grupo de titulares de patentes de H.264 que incluye a Microsoft y Apple . Por esta razón, no se consideró adecuado como códec único para HTML5.

Adquisición de Google de On2

La adquisición de On2 Technologies por parte de Google condujo a la creación del proyecto WebM , que utiliza el códec de video de código abierto y sin patente VP8 en un contenedor Matroska con audio Vorbis . Es compatible con los navegadores Google Chrome , Opera y Mozilla Firefox , así como con otros menos utilizados.

Cuando Google anunció en enero de 2011 su intención de eliminar la compatibilidad nativa con H.264 en Chrome, recibió críticas de muchos sectores, incluidos Peter Bright de Ars Technica y Tim Sneath de Microsoft (uno de los H.264), que compararon el movimiento de Google con la declaración del Esperanto como idioma oficial de los Estados Unidos . Sin embargo, Haavard Moen de Opera Software criticó duramente el artículo de Ars Technica aclarando su intención de promover WebM en sus productos basándose en la apertura de Internet.

Compatibilidad con navegador

Navegador Sistemas operativos Última versión estable Formatos de vídeo compatibles

Ogg
MPEG
WebM
teora H.264 VP8 VP9
navegador android Androide 4.4.4 "KitKat" (19 de junio de 2014) Desde 2.3 Desde 3.0 Desde 2.3 No
Cromo Todo compatible Desde r18297 Instalación manual [1] Desde r47759 Desde r172738
Google Chrome Todo compatible 44.0.2403.125 (28 de julio de 2015) Desde 3.0 Desde 3.0 [2] Desde 6.0 Desde 29.0
explorador de Internet ventanas 11.0.21 (14 de julio de 2015) Instalación manual Desde 9.0 Instalación manual No
Telefono windows 11.0 (10 de febrero de 2014) No Desde 9.0 No
Windows RT 10.0 (14 de febrero de 2011) Desde 10.0
Conquistador Todo compatible 4.14.3 (11 de noviembre de 2014) Desde 4.4 [3]
Borde de Microsoft ventanas 10 20.10240.16384.0 (29 de julio de 2015) Desde 17 Desde 1.0 No No
Mozilla Firefox ventanas 7+ 39.0 (2 de julio de 2015) Desde 3.5 Desde 21.0 Desde 4.0 Desde 28.0
Windows Vista Desde 22.0
Windows XP Instalación manual
linux Desde 26.0
Androide Desde 17.0
Mac OS Desde 34.0
Sistema operativo Firefox Desde 1.1
Ópera Androide 30.0.1856.93524 (24 de junio de 2015) No A partir de las 11.50 Desde 15.0 Desde 16.0
Symbian S60 12.0.22 (24 de junio de 2012)
móvil de Windows 10.0 (16 de marzo de 2010)
Windows , mac OS , Linux 30.0.1835.125 (14 de julio de 2015) A partir de las 10.50 Desde 24.0 Desde las 10.60 No
Safari iOS 8.0.7 (30 de junio de 2015) No Desde 3.1 No No
Mac OS Instalación manual Instalación manual
Web Todo compatible 3.16.3 (18 de mayo de 2015) Desde 2.28 [4]

Difusión de formatos

En abril de 2010, cuando el iPad de Apple estaba a punto de ser lanzado, muchos sitios comenzaron a ofrecer video HTML5 con el códec H.264 en lugar de Flash para usuarios identificados como iPad.

En mayo de 2010, los videos HTML5 no eran tan populares como los videos Flash, aunque algunos sitios habían comenzado a experimentar con videos HTML5, incluidos Dailymotion (usando los formatos Theora y Vorbis), YouTube (tanto H.264 como en WebM) y Vimeo (en H. .264).

Según una nota de YouTube, el artículo <video>no satisface actualmente todas las necesidades del sitio. La razón principal de esto es la ausencia de un formato estándar, la falta de un sistema de protección de contenido y la imposibilidad de mostrar videos en pantalla completa. Incluso Hulu no ha adoptado HTML5 debido a la imposibilidad de adaptar el ancho de banda disponible para el usuario y proteger los contenidos que se muestran. Además , Netflix no ha adoptado HTML5 por razones similares.

El 11 de enero de 2011, el proyecto Chromium de Google anunció la eliminación de la compatibilidad con códecs cerrados (específicamente H.264) de futuras versiones de Chrome. El anuncio especificaba que la decisión se tomó para ayudar a difundir HTML5 libre de patentes favoreciendo el uso de los códecs de código abierto VP8 y Theora.

En abril de 2011, Google anunció la conversión de todos los videos de YouTube a WebM a partir del 30% de los más vistos.

Uso de múltiples formatos de video al mismo tiempo

A la espera de que el HTML5 Working Group establezca de una vez por todas cuál debe ser el formato de vídeo oficial del elemento <video>, es posible insertar <video>diferentes formatos multimedia en una misma etiqueta para que el navegador elija cuál abrir. Para hacer esto tienes que usar el elemento <source>.

Por ejemplo, suponiendo que desea insertar el video "ejemplo" en una página en los tres formatos Theora , H.264 y WebM , debe usar el siguiente código:

<cartel de video = controles "immagine.jpg"> <fuente src = "ejemplo.ogv" tipo = "video/ogg"> <fuente src = "ejemplo.mp4" tipo = "video / mp4"> <fuente src = "ejemplo.webm" tipo = "video / webm"> <p> Este texto se muestra si su navegador no es compatible con HTML5. </p> </vídeo>

Plataforma externa o interna

Puede incrustar un video alojándolo en el servidor de su sitio web (" autoalojamiento ") o en una plataforma externa ( YouTube , Vimeo , ...) [5] [6] [7] [8] .

Servidor propio plataforma externa
PRO VERSUS PRO VERSUS
Privacidad y control total Tiempos de carga de página más largos Diferentes dispositivos y navegadores requieren diferentes formatos de archivo. Los servicios de terceros pueden convertir el archivo de video. El video se puede descargar a través de servicios web especiales [9]
Nadie puede descargar, eliminar o prohibir el video. Si el alojamiento privado tiene un rendimiento deficiente, es posible que falte la reproducción Ancho de banda mucho mayor que el alojamiento privado común Menos privacidad y control
Sin logo ni marca de agua Reproducción más lenta y menos fiable Reproducción más rápida Apariencia no totalmente personalizable
Colores/apariencia totalmente personalizables No hay promociones adicionales fuera de lo que el sitio

anfitrión proporciona

El video no se detendrá hasta que finalice, independientemente de la velocidad de Internet del usuario. Posibles marcas de agua
Mantienes a los visitantes en tu propia página Los clientes potenciales pueden terminar accidentalmente en el video si está en una plataforma externa. Esto no pasa en un hosting privado Los clientes potenciales pueden terminar accidentalmente en el video Anuncios de empresas externas durante el video
No se sugieren anuncios ni videos al final del video. SEO más limitado de las plataformas

famoso

Mejor SEO (las plataformas populares están mejor indexadas que los sitios web privados) Posible eliminación del video si no cumple con ciertas reglas

Comparación con otras técnicas

Algunas animaciones creadas con varias técnicas son visualmente idénticas o muy similares a un video incrustado con la etiqueta <video>. Cada técnica tiene pros y contras, dependiendo de tus necesidades [10] [11] [12] :

GIF Animación CSS Lienzo \ WebGL SVG <vídeo>
PROS: simplicidad de creación,

adaptabilidad a diferentes dispositivos, puede ser guardado por el usuario con el botón derecho del mouse , sin programación

CONTRAS: posibilidades muy limitadas, sin interactividad

PROS: amplias posibilidades, poco peso en KB, interactividad

CONTRAS: no siempre adaptable

a todos los dispositivos, programación

necesario no siempre fácil

PROS: amplias posibilidades, realismo 3D, interactividad

CONTRAS: no siempre adaptable

a todos los dispositivos, programación

necesario no siempre fácil

PROS: amplias posibilidades, sin restricciones en la calidad de los píxeles, interactividad

CONTRAS: no siempre adaptable

a todos los dispositivos, programación

necesario no siempre fácil

PRO: posibilidades muy amplias con el uso de software de animación avanzado como Premiere y After Effects , adaptable

a todos los dispositivos, posibilidad de parar y reanudar el vídeo desde cualquier punto, subtítulos en todos los idiomas, sin programación

CONTRAS: sin interactividad, archivos pesados, video descargable por el usuario con el botón derecho del mouse

Subtítulos

Puede crear subtítulos en todos los idiomas de su elección, visibles durante el video y también descargables en TXT u otro formato [13] [14] :

< video id = "video" controles preload = "metadata" > < source src = "video/uno.mp4" type = "video/mp4" > < source src = "video/uno.webm" type = "video/webm " > < track label = " English " kind = " subtitles " srclang = " en " src = " captions / vtt / uno-en.vtt " default > < track label = " Deutsch " kind = " subtitles " srclang = " de " src = " captions/vtt/uno-de.vtt " > < track label = " Español " kind = " subtitles " srclang = " es " src = " captions / vtt / uno-es.vtt " > </ video >

Estilos CSS de subtítulos

Puede dar formato a los subtítulos con diferentes estilos. Las principales propiedades CSS para hacer esto son [15] :

  • color
  • opacity
  • visibility
  • text-decoration
  • text-shadow
  • background
  • outline
  • font
  • white-space

Ejemplo:

:: cue ( v [ voz = 'Prueba' ]) { color : #ccc ; fondo : #0055dd ; }

Utilizar como fondo de otro elemento HTML

Se puede insertar un video HTML5 como fondo de otro elemento HTML, como un párrafo, un DIV o incluso todo el sitio web y hacerlo receptivo. Sin embargo, si se inserta como fondo, al igual que una imagen o un degradado CSS 3, el usuario no puede guardarlo con el botón derecho del mouse y "guardar como", ya que será un video de decoración y no de contenido [16] .

# myVideo { posición : fijo ; derecha : 0 ; inferior : 0 ; ancho mínimo : 100 % ; min-altura : 100 % ; } . contenido { posición : fijo ; inferior : 0 ; fondo : rgba ( 0 , 0 , 0 , 0,5 ); color : #f1f1f1 ; ancho : 100 % ; relleno : 20 px ; }

Formateo

Con CSS 3 , Canvas , SVG y WebGL es posible formatear el video incrustado <video>y agregar varios efectos sin actuar directamente sobre el video con Adobe Premiere u otro software [17] .

Elementos animados delante del video

@ superposición de fotogramas clave { 30 % { izquierda : 0 ; ancho : 50 % ; } 50 % { fondo : # 00f ; } 80 % { izquierda : 80 % ; ancho : 20 % ; } 100 % { izquierda : 60 % ; ancho : 40 % ; fondo : #00f ; } } figure # fashion { display : inline-block ; posición : relativa ; tamaño de fuente : 0 ; margen : 0 ; } figura # video de moda { ancho : 100 % ;

Filtros

Puede agregar filtros delante del video [18] también en modo de fondo receptivo [19] [20] (sepia, viñeta , desenfoque ...):

CSS 3 vídeo { posición : fijo ; superior : 50 % ; izquierda : 50 % ; ancho mínimo : 100 % ; min-altura : 100 % ; ancho : automático ; altura : automático ; índice z : -1 ; transformar : traducirX ( -50 % ) traducirY ( -50 % ); } SVG < reproducción automática de video = "verdadero" id = "vid" controles = "controles" bucle = "bucle" > < fuente src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.vp9.webm" type = "video/ogg" /> < fuente src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.vp9.webm" type = "video/mp4" /> </ video > < id de svg = 'imagen' versión = "1.1" xmlns = "http://www.w3.org/2000/svg" > < defs > < id de filtro = "blurEffect" > < feGaussianBlur stdDeviation = "4" /> </ filter > < filter id = "turbulencia" > < feTurbulence baseFrequency = ".01" type = "fractalNoise" numOctaves = "3" seed = "23" stitchTiles = "stitch" /> </ filter > < filter id = "blur" > < feGaussianBlur stdDeviation = "10,3" result = "outBlur" /> </ filter > < filter id = "inverse" > < feComponentTransfer > < feFuncR type = "table" tableValues ​​= "1 0" /> < tipo feFuncG = "tabla" valorestabla = "1 0" /> < tipo feFuncB = "tabla" valorestabla = "1 0" /> </ feComponentTransfer > </ filtro >

Máscaras

Puede crear máscaras SVG o CSS3 que son formas geométricas con un video dentro [21] [22] .

SVG <? xml version = "1.0" standalone = "no"?> <! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1 /DTD/svg11.dtd "> < versión svg = " 1.1 " xmlns = " http://www.w3.org/2000/svg " xmlns: xlink = " http://www.w3.org/1999 /xlink " > < defs > < máscara > < id de texto = " texto " x = " 10 " y = " 140 " tamaño de fuente = " 150 " peso de fuente = " negrita " familia de fuentes = " Verdana " relleno = " blanco " > HOLA </ texto > </ máscara > </ defs > < use xlink: href = " #texto " /> </ svg > CSS 3 vídeo { máscara : url ( '#vmask' ); cuadro-imagen : url ( 'texto.svg' ); margen : 100 px ; }

Edición de vídeo con Canvas

Puedes realizar manipulaciones gracias a HTML5 Canvas como el efecto Chroma Key [23] .

procesador var ; procesador _ doLoad = function doLoad () { this . vídeo = documento . getElementById ( 'vídeo' ); esto _ c1 = documento . getElementById ( 'c1' ); esto _ ctx1 = esto . c1 . getContext ( '2d' ); esto _ c2 = documento . getElementById ( 'c2' ); esto _ ctx2 = esto . c2 . getContext ( '2d' ); let self = esto ; esto _ vídeo _ addEventListener ( 'play' , function () { self . ancho = self . video . videoWidth / 2 ; self . height = self . video . videoHeight / 2 ; self . timerCallback (); }, false ); },

Transiciones WebGL

Puede crear transiciones entre videos con WebGL [24] .

const cortinas = cortinas nuevas ({ contenedor : "canvas" , pixelRatio : Math . min ( 1.5 , window . devicePixelRatio ), }); const params = { vertexShaderID : "vertexShader" , fragmentShaderID : "fragmentShader" , uniforms : { transición : { nombre : "uTransition" , tipo : "1f" , valor : 0 , }, }, }; const multiTexturesPlane = new Plane ( cortinas , [... document . getElementsByClassName ( "plane" )], params );

Formatear el reproductor de video

También puede cambiar el reproductor de video que muestra el video (es decir, los botones, la barra de progreso del video, el contorno...) [25] . Un ejemplo con CSS:

. botón de controles { borde : ninguno ; cursor : puntero ; fondo : transparente ; tamaño de fondo : contiene ; repetición de fondo : sin repetición ; } . controla el progreso { display : block ; ancho : 100 % ; altura : 81 % ; margen superior : 0,125 rem ; borde : ninguno ; color : #00ccff ; borde-radio : 2 px ; }

Ejemplos

  • Ejemplo de un efecto Chroma Key en un video realizado con Canvas .

  • Ejemplo de máscara SVG en un video (con CSS3 puedes obtener el mismo efecto)

  • Ejemplo de filtro SVG (se puede lograr el mismo efecto con CSS3)

Notas

  1. ^ Hay paquetes de códecs de terceros disponibles.
  2. ^ El 11 de enero de 2011, se anunció la eliminación de la compatibilidad con H.264 en el blog de Chromium; sin embargo, al 26 de septiembre de 2022, aún no se ha eliminado y no se han realizado más anuncios.
  3. ^ Cualquier formato compatible con Phonon en Qt 4.5.
  4. ^ Cualquier formato compatible con GStreamer en Webkit/GTK+.
  5. ^ Vídeos de YouTube frente a alojamiento propio: ¿cuál es mejor para ti ? , sobre Luz Líquida . Consultado el 10 de febrero de 2021 .
  6. ^ Tim Neighbors, Self-Hosting Video Content -Pros and Cons , sobre la producción de video de Invisible Harness , 6 de julio de 2017. Consultado el 10 de febrero de 2021 .
  7. ^ Usabilidad del sitio web : reproductor de YouTube vs. Vídeo autohospedado , sobre las últimas tendencias de Voice of Customer y CX | Blog de Usabilla , 4 de agosto de 2015. Consultado el 10 de febrero de 2021 .
  8. ^ Tumblr contra Wordpress para bandas , en Small Business-Chron.com . Consultado el 10 de febrero de 2021 .
  9. ^ Descargador de YouTube GRATIS - Descargador de videos de Youtube gratis - Descarga rápida - YouTube a MP4 , en Freemake . Consultado el 10 de febrero de 2021 .
  10. ^ Animación HTML vs GIF vs Video - Hippani , en hippani.com . Consultado el 10 de febrero de 2021 .
  11. ^ WebGL - Animación , en webglfundamentals.org . Consultado el 10 de febrero de 2021 .
  12. ^ 15 Inspiración de animación de lienzo : fragmentos de HTML y CSS Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀 , en codemyui.com . Consultado el 10 de febrero de 2021 .
  13. ^ Descargue subtítulos de Youtube, Viki, Viu, Vlive y más , en downsub.com . Consultado el 10 de febrero de 2021 .
  14. ^ Descargue subtítulos de Youtube, Facebook, Viki, Dailymotion y más , en savesubs.com . Consultado el 10 de febrero de 2021 .
  15. ^ Adición de leyendas y subtítulos a video HTML5 - Guías para desarrolladores | MDN , en developer.mozilla.org . Consultado el 10 de febrero de 2021 .
  16. ^ Estilos de video de fondo de página completa , en CSS-Tricks , 28 de mayo de 2017. Consultado el 10 de febrero de 2021 .
  17. ^ Dudley Storey, Efectos de video HTML5 con modos de fusión CSS , sobre el nuevo código . Consultado el 10 de febrero de 2021 .
  18. ^ filtros , en codepen.io .
  19. ^ filtros , en codepen.io .
  20. ^ filtros svg , en codepen.io .
  21. ^ Trabajar con gráficos vectoriales escalables (SVG) en HTML5 Video Element , en mrbool.com . Consultado el 10 de febrero de 2021 .
  22. ^ svg , en codepen.io .
  23. ^ Manipulación de video usando lienzo - API web | MDN , en developer.mozilla.org . Consultado el 10 de febrero de 2021 .
  24. ^ Team Codrops , WebGL Video Transitions with Curtains.js , en Codrops , 7 de octubre de 2020. Consultado el 10 de febrero de 2021 .
  25. ^ Conceptos básicos de estilo del reproductor de video - Guías para desarrolladores | MDN , en developer.mozilla.org . Consultado el 10 de febrero de 2021 .

Otros proyectos

Enlaces externos