Antes de que existiera HTML 5, los desarrolladores web tenían que insertar videos en sus páginas web usando plugins como Adobe Flash Player.
Hoy en día, puedes insertar videos fácilmente en tu documento HTML usando la etiqueta <video>.
En este artículo, veremos cómo funciona la etiqueta <video> en HTML.
Sintaxis Básica
Al igual que con la etiqueta <img>, la etiqueta <video> acepta el atributo src, con el cual debes especificar la fuente del video.
<video src="Ballena.mp4"></video>
El código CSS que se muestra a continuación, coloca todo en el centro y cambia el color de fondo:
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}Además, puedes especificar múltiples fuentes de video. Para esto, necesitarás la etiqueta <source>. Esta etiqueta debe tener su propio atributo src.
Para que la página soporte múltiples formatos del mismo video, puedes usar varias etiquetas <source>. El navegador reproducirá el formato que sea compatible.
<video controls>
<source src="video1.mp4" />
<source src="video2.ogg" />
<source src="video3.webm" />
</video>Atributos de la Etiqueta <video>
La etiqueta <video> soporta atributos globales como id, class, style etc.
Si te interesa saber qué son los atributos globales, son aquellos atributos que son soportados por todas las etiquetas HTML.
También hay atributos específicos que son soportados por la etiqueta <video>. Entre estos se encuentran src, poster, controls, loop, autoplay, width, height, muted, preload y otros.
Atributo src
El atributo src es necesario para especificar la fuente del video. Puede ser una ruta relativa al video en tu computadora local o un enlace a una transmisión de video desde internet.
<video src="video.mp4"></video>Este atributo es opcional, ya que puedes usar la etiqueta <source> en su lugar.
Atributo poster
Con el atributo poster, puedes insertar una imagen que se mostrará antes de que el video comience a reproducirse, o durante su carga.
<video src="video.mp4" poster="ballena.jpg"></video>En lugar de la primera escena del video, el navegador mostrará la siguiente imagen:
Atributo controls
Con el atributo controls, el navegador puede mostrar los elementos de control de reproducción, como reproducir, pausar, volumen, búsqueda, etc.
<video
controls
src="video.mp4"
poster="ballena.jpg"
></video>
Atributo loop
Con el atributo loop, puedes activar el video en modo repetido automático. Es decir, puedes hacer que se reproduzca de nuevo cada vez que termina.
<video
controls
loop
src="video.mp4"
poster="imagen-portada.jpg"
></video>Atributo autoplay
El atributo autoplay permite que el video comience a reproducirse inmediatamente después de que la página se cargue.
<video
controls
loop
autoplay
src="video.mp4"
poster="imagen-portada.jpg"
></video>Atributos width y height
Para especificar el ancho y alto del video en píxeles, puedes usar los atributos width y height. Estos atributos solo aceptan valores absolutos en píxeles.
<video
controls
loop
autoplay
src="video.mp4"
width="350px"
height="250px"
poster="imagen-portada.jpg"
></video>
Atributo muted
Para indicarle al navegador que, cuando el video comience a reproducirse, no debe reproducir su sonido, puedes usar el atributo muted.
<video
controls
loop
autoplay
muted
src="video.mp4"
width="350px"
height="250px"
poster="imagen-portada.jpg"
></video>
Si se ha especificado el atributo controls, el usuario puede hacer clic en el botón de ajuste de volumen para activar el sonido.
Atributo preload
Con el atributo preload, puedes decirle al navegador si debe cargar el video al cargar la página.
Este atributo es clave en la interacción con el usuario.
Con el atributo preload, puedes usar tres valores:
none: indica que el video no se cargará hasta que el usuario haga clic en el botón de reproducción.auto: indica que el video debe cargarse incluso si el usuario no ha hecho clic en el botón de reproducción.metadata: indica que el navegador debe recopilar metadatos, como la duración, el tamaño, la longitud, etc.
<video
controls
loop
autoplay
muted="true"
preload="metadata"
src="video.mp4"
width="350px"
height="250px"
poster="imagen-portada.jpg"
></video>Conclusión
En este artículo hemos analizado la etiqueta <video> de HTML 5 y sus atributos. Ahora puedes usarla correctamente en tus proyectos.
Dado que el sonido es una parte importante de un video completo, puedes usar la etiqueta <video> para colocar archivos de audio en páginas web. Sin embargo, en la mayoría de los casos, debes usar la etiqueta <audio> para garantizar una interacción adecuada con el usuario.
