Video HTML

La visión general de Media señaló varias familias. Esta sesión se centra en una: el elemento video para clips y demos que alojas tú mismo. Da a los visitantes una interfaz de reproducir y pausar con controls en lugar de sorprenderlos con sonido que arranca solo.

Qué hace video

video le dice al navegador que descargue un archivo de película y lo dibuje en la página. Puedes apuntar a un solo archivo con src, o listar varios hijos <source> para que el navegador elija un formato compatible. Los atributos opcionales reservan tamaño (width / height), muestran un fotograma fijo antes de reproducir (poster) y exponen controles nativos.

Respuesta directa

Usa <video controls src="movie.mp4"> o anida hijos <source> para varios formatos. Agrega una imagen poster como fotograma de vista previa antes de reproducir. Incluye texto de respaldo corto (y opcionalmente un enlace de descarga) dentro de video para agentes que no puedan reproducir el medio. Prefiere archivos comprimidos de tamaño razonable.

Video simple con controls

Un solo MP4 más controls y un ancho alcanza para muchas páginas didácticas.

Lectura del ejemplo simple

• controls pide al navegador una UI de reproducir/pausar
• width="480" ayuda a reservar espacio de diseño mientras carga el archivo
• src apunta al archivo de película en tu carpeta media
• El texto dentro de video es contenido de respaldo cuando el elemento no está soportado

Varias fuentes y un poster

Los navegadores difieren en la comodidad con formatos. Listar WebM y MP4 con pistas type, más una imagen fija poster, es un patrón práctico común.

Lectura del ejemplo multi-fuente

• poster muestra una imagen de vista previa hasta que empieza la reproducción
• Cada source nombra un archivo y un type MIME
• El navegador elige la primera fuente que pueda reproducir
• El enlace de descarga interior ayuda cuando la reproducción no está disponible

Tamaño de archivo y formatos

Las exportaciones enormes de cámara se traban en redes lentas. Exporta un MP4 de tamaño web (y opcionalmente WebM) que coincida con la necesidad didáctica — demos cortas ganan a masters de varios gigabytes en una página de lección. No necesitas cada contenedor el primer día; haz funcionar un MP4 claro y después agrega un segundo formato si tu audiencia lo requiere.

Autoplay: aprende controls primero

El autoplay con sonido suele estar bloqueado y casi siempre es de mala educación. Existen trucos de muted autoplay para héroes de marketing, pero los principiantes deben dominar primero controls y la reproducción iniciada por el usuario. Cuando más adelante necesites autoplay, lee con cuidado las políticas del navegador y mantén un camino accesible para pausar.

Subtítulos y accesibilidad (hábito)

Si el contenido hablado enseña algo importante, planifica subtítulos o una transcripción — aunque conectes elementos track completos en un pase posterior. No dependas solo de la imagen poster como único resumen accesible de una lección talking-head.

Ancho, alto y diseño

Definir width (y un height coincidente cuando conoces la relación de aspecto) reduce saltos de diseño mientras cargan los metadatos del video. Estirar con números desparejos se ve mal; mantén la relación de aspecto real en mente, igual que con las imágenes.

Práctica en tu editor

1. Coloca un .mp4 corto en una carpeta media.
2. Embébelo con video + controls + un ancho sensato.
3. Agrega texto de respaldo dentro del elemento.
4. Opcionalmente agrega una imagen poster y un segundo formato source.
5. Abre la página, reproduce y pausa, luego prueba con la red limitada si puedes — nota por qué importa el tamaño del archivo.

Errores fáciles

• Faltar controls para que los usuarios no puedan reproducir con facilidad
• Enviar archivos enormes sin comprimir que se traban en redes lentas
• Olvidar el texto de respaldo o un enlace de descarga
• Ir a autoplay con sonido antes de entender lo básico
• Poner alt en video como en img (usa subtítulos/transcripciones y descripciones visibles en su lugar)
• Confundir embeds de YouTube (iframe) con archivos video autoalojados

Resumen

• video embebe archivos de película que alojas
• Usa controls para la UI de reproducción
• Varios tags source mejoran el soporte de formatos
• poster muestra un fotograma de vista previa antes de reproducir
• Prefiere archivos comprimidos y evita el sonido de autoplay sorpresa