Las imágenes capturan un momento. Los vídeos capturan el tiempo mismo. En la era de YouTube, TikTok e Instagram, el vídeo se ha convertido en el rey del contenido. Y HTML te da el poder de incrustarlo directamente en tu web.
<video>Añadir un vídeo es sorprendentemente similar a añadir una imagen:
Pero si pruebas esto... verás un rectángulo negro. El vídeo está ahí, pero está congelado, esperando. ¿Dónde está el botón de play?
controls: dando el poder al usuarioPor defecto, el vídeo aparece sin controles. Es como un televisor sin mando:
Ahora aparece la barra de controles: play/pausa, volumen, barra de progreso, pantalla completa. Todo lo que el usuario necesita para interactuar con el vídeo.
controls es un atributo booleano — no necesita valor.
Su mera presencia dice "verdadero". Si no está, significa "falso".
autoplay¿Quieres que el vídeo empiece solo cuando cargue la página?
Pero aquí viene el giro: los navegadores bloquean el autoplay con sonido.
¿Por qué? Porque a nadie le gusta abrir una pestaña y que le asalte un vídeo a todo volumen. Es una de esas reglas que existen para proteger la cordura de los usuarios.
mutedPara que el autoplay funcione, el vídeo debe estar silenciado:
Ahora sí. El vídeo arranca automáticamente, en silencio. Perfecto para fondos animados, banners visuales o previsualizaciones.
El usuario puede activar el sonido manualmente si añades controls:
loopPara que el vídeo se repita infinitamente:
Ideal para fondos animados que nunca deben detenerse.
Aquí tienes un vídeo con todas las opciones comunes:
El texto entre las etiquetas es un fallback — solo aparece si el navegador no puede reproducir vídeos (muy raro hoy en día, pero buena práctica).
¿Quieres mostrar una imagen antes de que el usuario reproduzca el vídeo?
El poster es como la portada de una película.
El usuario ve esa imagen hasta que pulsa play.
No todos los navegadores soportan todos los formatos de vídeo.
Para máxima compatibilidad, puedes ofrecer varios usando <source>:
El navegador usará el primer formato que entienda. WebM es más ligero, MP4 es más universal. Ofrecer ambos es lo ideal.
Crea una página con un vídeo que tenga:
El vídeo cuenta historias que las imágenes solo pueden soñar...