1\. Estructura básica
El elemento requiere la etiqueta de apertura y cierre, y generalmente utiliza la etiqueta `<source>` para definir el archivo multimedia.
html
```
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Tu navegador no soporta la etiqueta de video.
</video>
```
2\. Atributos fundamentales
El elemento `<video>` permite configurar el comportamiento del reproductor mediante diversos atributos:
- **`controls`**: Muestra los controles nativos del navegador (reproducir, pausar, volumen, pantalla completa).
- **`autoplay`**: Permite que el video comience a reproducirse automáticamente al cargar. *Nota: Para que esto funcione en la mayoría de los navegadores, el video debe incluir el atributo `muted`.*
- **`muted`**: Silencia el audio del video por defecto.
- **`loop`**: Hace que el video se repita de forma infinita.
- **`poster`**: Define una imagen que se muestra antes de que el video comience, útil como miniatura.
- **`preload`**: Indica al navegador cómo debe manejar la carga del archivo (`none`, `metadata` o `auto`).
3\. Compatibilidad de formatos
Para asegurar que el video funcione en todos los navegadores, se recomienda incluir múltiples fuentes utilizando la etiqueta `<source>`. El navegador intentará reproducir el primer formato que reconozca. Los formatos más comunes son **MP4** (el más compatible) y **WebM** (optimizado para la web).
4\. Accesibilidad y subtítulos
Es posible incluir archivos de subtítulos o descripciones mediante la etiqueta **`<track>`**. Esto mejora la accesibilidad del contenido:
html
```
<track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
```

No hay comentarios:
Publicar un comentario