Para insertar y reproducir vídeos en HTML utilizamos la etiqueta video, que funciona de manera muy similar a la etiqueta audio. Lo primero que necesitamos es tener el archivo de vídeo en nuestra carpeta de proyecto; por ejemplo, un archivo llamado drone.mp4. La estructura básica consiste en abrir la etiqueta video y dentro colocar una o varias etiquetas source que indiquen la ubicación y el tipo de archivo de vídeo que queremos reproducir.
Un aspecto fundamental a tener en cuenta son los formatos y codecs de vídeo. Aunque el archivo tenga extensión .mp4, este no es un formato en sí mismo, sino un contenedor que suele usar el codec h264 para el vídeo y aac para el audio. Sin embargo, no todos los navegadores ni sistemas operativos soportan los mismos codecs debido a temas de patentes y licencias. Por ejemplo, h264 es muy popular y ampliamente utilizado, pero en sistemas como Linux puede que no venga instalado por defecto, lo que puede impedir la reproducción en navegadores como Firefox o Chromium si no se tiene el paquete de codecs adecuado.
Además de mp4, existen otros formatos como webm, que es un formato libre promovido por Google, y ogg video, común en sistemas GNU. Para asegurar la máxima compatibilidad, lo ideal es ofrecer varias versiones del vídeo en distintos formatos y especificarlas todas dentro de la etiqueta video mediante varias etiquetas source. Por ejemplo:
<video controls>
<source src="drone.mp4" type="video/mp4">
<source src="drone.webm" type="video/webm">
<source src="drone.ogv" type="video/ogg">
Tu navegador no soporta la reproducción de vídeo.
</video>
En cuanto a los atributos de la etiqueta video, por defecto el navegador no muestra controles, por lo que si queremos que el usuario pueda reproducir, pausar o controlar el volumen, debemos añadir el atributo controls. Esto nos proporciona un reproductor básico con botones para reproducir, pausar, ajustar volumen, pantalla completa y descarga si está permitido.
El tamaño del vídeo también es importante. Si no especificamos dimensiones, el navegador mostrará el vídeo en su resolución original, que puede ser demasiado grande para la página. Podemos ajustar el tamaño usando CSS o directamente con los atributos width y height en la etiqueta video. Por ejemplo:
<video controls width="640" height="360">
<source src="drone.mp4" type="video/mp4">
</video>
Para que el vídeo se reproduzca automáticamente al cargar la página, podemos usar el atributo autoplay. Sin embargo, es recomendable usarlo con precaución, ya que puede no ser deseable en todos los contextos y algunos navegadores limitan su uso para evitar molestias al usuario. También podemos hacer que el vídeo se repita indefinidamente con el atributo loop.
Cuando no queremos que el vídeo se reproduzca automáticamente, el navegador mostrará el primer fotograma del vídeo como imagen previa. Si queremos personalizar esta imagen para que sea más atractiva o informativa, podemos usar el atributo poster para indicar una imagen que se mostrará antes de que el usuario pulse play. Por ejemplo:
<video controls width="640" height="360" poster="poster.jpg">
<source src="drone.mp4" type="video/mp4">
</video>
Así, hasta que el usuario inicie la reproducción, verá la imagen especificada en poster, que funciona como una miniatura personalizada similar a las que vemos en plataformas como YouTube.
En resumen, reproducir vídeo en HTML es sencillo: usamos la etiqueta video con sus fuentes y atributos para controlar la experiencia. El mayor desafío suele estar en asegurarnos de que el vídeo esté codificado en formatos compatibles y probar su reproducción en distintos navegadores para evitar problemas con codecs o formatos no soportados. Con un poco de cuidado en estos detalles, podemos ofrecer una experiencia de vídeo fluida y accesible para todos los usuarios.