HTML5 es la última versión de HTML. A diferencia de las versiones anteriores de HTML, HTML5 permite que los desarrolladores puedan añadir con facilidad vídeo a las páginas web con una etiqueta de vídeo.
Después de leer este artículo podrás:
Contenido relacionado
¿Qué es la transmisión?
Video CDN
¿Qué es la transmisión en vivo?
Transmisión en vivo HTTP
¿Qué es MPEG-DASH?
Suscríbete a theNET, el resumen mensual de Cloudflare sobre las ideas más populares de Internet.
Copiar el enlace del artículo
HTML5 es la última versión del Lenguaje hipertexto de marcado (HTML), un lenguaje de codificación para formatear contenido en Internet. Todas las páginas web utilizan HTML para indicar a los navegadores cómo mostrar su contenido. En comparación con las versiones anteriores de HTML, HTML5 tiene una serie de funciones adicionales, una de las cuales es la posibilidad de añadir vídeos a una página web. Otras funciones de HTML5 son la compatibilidad con gráficos SVG, las etiquetas para definir la navegación en un sitio web, y las etiquetas de encabezado y pie de página.
El elemento vídeo de HTML5 indica al navegador que cargue un archivo de vídeo desde otra fuente, especificando la ubicación del archivo de vídeo, de forma similar a como un navegador carga un archivo de imagen (la imagen en sí no se almacena en el archivo HTML, sino que el navegador la saca de otro lugar). También se pueden incluir el ancho, la altura y otros atributos para indicar al navegador cómo debe mostrar el vídeo. Otro código de marcado puede indicar al navegador dónde colocarlo en la página.
La etiqueta de vídeo de HTML5 es <video>, y la etiqueta de cierre, de forma similar a otros elementos de HTML, es </video>.
Entre estas etiquetas, una etiqueta <source> indica la ubicación del archivo de vídeo. Dentro de esta etiqueta, tanto la fuente de vídeo (src) como el tipo de archivo (type) se indican de la siguiente manera:
<video>
<source src="example.mp4" type="video/mp4">
</video>
Los siguientes atributos importantes también pueden ir dentro de la etiqueta <video>:
width="370"controles a la etiqueta <video> para incluirlos.En el caso de que un navegador no sea compatible con el primero formato de archivo, las fuentes alternativas para el vídeo también pueden ir dentro de las etiquetas <video>. Los navegadores siempre utilizan la primera fuente que se ha indicado.
Además, se puede colocar texto entre las etiquetas < video>; este texto solo se muestra si el navegador del usuario no es compatible con el vídeo de HTML5.
En conjunto, el código HTML5 para un vídeo incrustado podría tener este aspecto:
<video controls width="370" height="130">
<source src="example.mp4" type="video/mp4">
<source src="alternate-example.webm" type="video/webm">
Tu navegador no es compatible con el vídeo de HTML5.
</video>
Dentro del elemento de vídeo también se pueden utilizar otros atributos, como autoplay (para reproducir el vídeo en cuanto se cargue la página), loop (para reproducir vídeos en bucle), muted (para silenciar los vídeos) y poster (para mostrar una imagen antes de que se cargue el vídeo). Mozilla tiene una buena documentación sobre estos atributos.
HTML5 no es en sí mismo un protocolo de transmisión. Los sitios web diseñados con HTML5 pueden utilizar varios protocolos de transmisión diferentes para reproducir vídeo, incluyendo la transmisión en directo HTTP (HLS) y MPEG-DASH. Esto se configura en el lado del servidor, no en el código de marcado HTML.
Los principales navegadores son compatibles con HTML5, lo que significa que pueden interpretar las etiquetas HTML5 que no formaban parte de las versiones anteriores de HTML. Sin embargo, no todos los navegadores son compatibles con todas las funciones de HTML5. Los desarrolladores tienen que tener en cuenta que algunos usuarios pueden tener una versión anticuada de un navegador, que no puede interpretar el elemento de vídeo de HTML5.
Antes del lanzamiento de HTML5 en 2008, los vídeos se solían incrustar con el plugin de Adobe Flash. HTML5 permitió a los desarrolladores incrustar vídeos en las páginas web con unas pocas etiquetas HTML, lo cual hizo que dejara de ser necesario usar un plugin. Como resultado, Flash se hizo menos necesario, y Adobe finalmente dejó de dar soporte a Flash el 31 de diciembre de 2020.
En la actualidad, la mayoría de los usuarios pueden transmitir vídeo sin un plugin adicional para el navegador, y los desarrolladores pueden utilizar diversos métodos para incrustar vídeos sin tener que depender de un plugin. El elemento de vídeo de HTML5 es uno de los métodos más utilizados para hacerlo.
Un plugin de navegador es un software que añade una función a un navegador que no está incluida de otro modo. Antes los navegadores no incluían la función de reproducir vídeo. Los plugins de terceros, como Adobe Flash, ayudaron a llenar este vacío.
Sin embargo, los plugins también pueden suponer una amenaza a la seguridad. Ofrecen más de una superficie de ataque —una forma adicional para los atacantes externos de comprometer una sesión de navegación— además de las superficies de ataque presentadas por el navegador y el sitio web. Además, los plugins pueden ralentizar la funcionalidad de la página. Apoyarse en el uso de plugins significa que múltiples partes de software tienen que funcionar adecuada y rápidamente para cargar una página web, no solo una.
Si un vídeo se incrusta de forma nativa, lo que es posible en HTML5, se cargará más rápido. Evitar el uso de un plugin también es más seguro.
Cloudflare Stream es una plataforma de vídeo a la carta que combina codificación, almacenamiento, entrega y la reproducción de vídeo. Consulta la documentación de Cloudflare Stream para más información sobre cómo cargar archivos de vídeo a Stream e incrustarlos en páginas web. O bien, consigue más información sobre Cloudflare Stream antes de empezar.