lunes, 6 de julio de 2026

HTML Etiqueta video

 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`).

                                   Photo by Alexander Shatov on Unsplash

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