Skip to content
Alebat

Conceptos Básicos de Vídeo en HTML5

Elemento <video>

El elemento <video> ha simplificado enormemente la inclusión de vídeos en las páginas web. Veamos cómo usarlo y algunos de sus atributos básicos:

  • Incorporación de un vídeo: Para incrustar un vídeo, utilizamos el elemento <video> especificando la ruta del archivo mediante el atributo src:
<video src="ruta/del/video.mp4" controls></video>
  • Atributos Básicos:
    • src: Especifica la ruta del archivo de vídeo.
    • controls: Al incluir este atributo, se muestran los controles de reproducción al usuario (play, pause, volumen, etc.).
    • autoplay: Hace que el vídeo se reproduzca automáticamente al cargar la página. Ten en cuenta las políticas de navegadores modernos que pueden restringir este comportamiento.
    • loop: Repite el vídeo automáticamente una vez que llega a su fin.
    • muted: Inicia el vídeo sin sonido. Esto es útil para vídeos que se reproducen automáticamente.

Formatos de Vídeo Soportados

La compatibilidad entre navegadores es un aspecto crucial al trabajar con vídeos en HTML5. No todos los navegadores soportan los mismos formatos de vídeo, lo que significa que debemos considerar qué formato(s) utilizamos para asegurar la máxima accesibilidad. Los formatos más comunes son:

  • MP4 (con codificación H.264 y AAC para audio): Es ampliamente soportado por la mayoría de los navegadores modernos, lo que lo hace prácticamente un estándar de facto.
  • WebM: Es un formato abierto y libre de regalías, soportado por navegadores como Firefox, Chrome, Opera, y también por la mayoría de los navegadores modernos. Ofrece una buena compresión y calidad de vídeo.
  • Ogg (Theora para vídeo y Vorbis para audio): Aunque soportado por muchos navegadores, su uso es menos común en comparación con MP4 y WebM.

Para asegurar la máxima compatibilidad, es recomendable ofrecer el vídeo en varios formatos, utilizando el elemento <source> dentro del elemento <video>:

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  Tu navegador no soporta el elemento de vídeo.
</video>