HTML video

La etiqueta <video> en HTML es utilizada para insertar videos en una página web. Es un elemento de bloque que permite especificar la fuente del video, así como configurar opciones como el tamaño, el formato y la compatibilidad con dispositivos.

Ejemplo de uso

Aquí tienes un ejemplo de cómo se utiliza:

<video src="video.mp4" width="320" height="240" controls autoplay>
  Tu navegador no soporta la etiqueta de video.
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está usando un video llamado “video.mp4” con tamaño de 320×240, con controles y se reproducirá automáticamente. Si el navegador no soporta la etiqueta de video se mostrará el mensaje “Tu navegador no soporta la etiqueta de video.”

Atributos

Los atributos comunes de la etiqueta <video> en HTML son:

• src: especifica la ruta de la fuente del video

• width y height: especifica el tamaño del video

• controls: define si se deben mostrar los controles del video

• autoplay: define si el video debe reproducirse automáticamente

• loop: define si el video debe reproducirse en bucle

• muted: define si el video debe iniciar sin sonido

• poster: especifica una imagen que se mostrará antes de reproducir el video

• preload: especifica cómo se deben cargar los datos del video

• playsinline: define si el video se reproducirá dentro del contenido o en una ventana emergente

• type: especifica el tipo de formato del video

Sin embargo, es importante mencionar que algunos de estos atributos pueden no ser soportados por todos los navegadores y algunos pueden ser obsoletos.

Más ejemplos

Aquí tienes algunos ejemplos de cómo utilizar los atributos de la etiqueta <video> en HTML:

1. Insertar un video con controles y reproducción automática:

<video src="video.mp4" width="320" height="240" controls autoplay>
  Tu navegador no soporta la etiqueta de video.
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está utilizando un video llamado “video.mp4” con tamaño de 320×240, con controles y se reproducirá automáticamente. Si el navegador no soporta la etiqueta de video se mostrará el mensaje “Tu navegador no soporta la etiqueta de video.”

2. Insertar un video con reproducción en bucle:

<video src="video.mp4" width="320" height="240" loop>
  Tu navegador no soporta la etiqueta de video.
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está usando un video llamado “video.mp4” con tamaño de 320×240 y se reproducirá en bucle. Si el navegador no soporta la etiqueta de video se mostrará el mensaje “Tu navegador no soporta la etiqueta de video.”

3. Insertar un video con una imagen previa:

<video src="video.mp4" width="320" height="240" controls poster="poster.jpg">
  Tu navegador no soporta la etiqueta de video.
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está usando un video llamado “video.mp4” con tamaño de 320×240, con controles y se mostrará una imagen previa llamada “poster.jpg” antes de reproducir el video. Si el navegador no soporta la etiqueta de video se mostrará el mensaje “Tu navegador no soporta la etiqueta de video.”

4. Insertar un video con varios formatos:

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Tu navegador no soporta la etiqueta de video.
</video>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se está especificando dos fuentes, una en formato MP4 y otra en formato WEBM, el navegador elegirá la fuente que soporte.