---
title: Vídeos
description: Incrusta archivos de vídeo MP4 y WebM locales en tu documentación con el componente Video o la sintaxis markdown.
---

Almacena archivos `.mp4` o `.webm` en un directorio `/videos` dentro de tu proyecto y referéncialos directamente. Jamdesk renderiza un reproductor HTML5 con controles, esquinas redondeadas y espaciado consistente.

Las capturas de pantalla muestran la interfaz en inglés.

## Sintaxis Markdown

El mismo patrón `![alt](ruta)` que usas para imágenes funciona también para archivos de vídeo. Jamdesk comprueba la extensión del archivo y renderiza un reproductor de vídeo en lugar de una etiqueta `<img>`:

```markdown
![Never Gonna Give You Up](/videos/never-gonna-give-you-up.mp4)
```

![Never Gonna Give You Up](/videos/never-gonna-give-you-up.mp4)

Esta es la forma más rápida de insertar un vídeo en una página. Obtienes un reproductor estándar con reproducción/pausa, volumen, barra de progreso y pantalla completa — sin necesitar props adicionales. Si quieres controlar el comportamiento de reproducción (autoplay, bucle, silencio), usa el componente `<Video>` en su lugar.

## Componente Video

El componente `<Video>` expone atributos de vídeo HTML5 como props, dándote control sobre el comportamiento del reproductor:

```mdx
<Video src="/videos/never-gonna-give-you-up.mp4" title="Rick Astley" />
```

<Video src="/videos/never-gonna-give-you-up.mp4" title="Rick Astley" />

El prop `title` establece el `aria-label` en el elemento de vídeo, que los lectores de pantalla anuncian cuando un usuario navega hasta él. Incluye siempre uno por accesibilidad.

## Props

| Prop | Tipo | Valor por defecto | Descripción |
|------|------|-------------------|-------------|
| `src` | `string` | ninguno | **Requerido.** Ruta al archivo de vídeo. |
| `title` | `string` | ninguno | Etiqueta de accesibilidad para lectores de pantalla. |
| `controls` | `boolean` | `true` | Muestra los controles integrados del reproductor del navegador. |
| `autoPlay` | `boolean` | `false` | Comienza a reproducirse en cuanto el vídeo es visible. |
| `muted` | `boolean` | `false` | Inicia con el audio silenciado. |
| `loop` | `boolean` | `false` | Reinicia desde el principio cuando el vídeo termina. |
| `width` | `string` | ninguno | Valor CSS de anchura (p. ej., `"400px"`, `"100%"`). |
| `height` | `string` | ninguno | Valor CSS de altura. |

## Sustitución de GIFs

Los GIFs animados crecen rápidamente en tamaño de archivo — una grabación de interfaz de 5 segundos puede alcanzar fácilmente 10 MB como GIF pero mantenerse por debajo de 500 KB como MP4. Sustituye los GIFs por un vídeo en bucle sin sonido y oculta los controles del reproductor:

```mdx
<Video src="/videos/ui-demo.mp4" autoPlay muted loop controls={false} />
```

El resultado se ve y se comporta como un GIF (se reproduce en línea, en bucle indefinido, sin controles) pero carga mucho más rápido y se mantiene nítido a cualquier resolución.

<Note>
Los navegadores bloquean el autoplay sin silenciar. Si configuras `autoPlay` sin `muted`, el vídeo no se reproducirá — permanecerá en el primer fotograma sin ningún error. Combínalos siempre juntos.
</Note>

## Formatos Compatibles

| Formato | Extensión | Compatibilidad con navegadores |
|---------|-----------|-------------------------------|
| MP4 (H.264) | `.mp4` | Todos los navegadores, incluidos Safari e iOS |
| WebM (VP9) | `.webm` | Chrome, Firefox, Edge — archivos más pequeños a calidad comparable |

MP4 es el formato seguro por defecto. Todos los navegadores y dispositivos lo soportan. WebM produce archivos más pequeños pero Safari e iOS no lo admiten, lo que significa que los lectores en dispositivos Apple no verán nada.

Los archivos de vídeo pueden tener hasta **100 MB**. Para cualquier cosa más larga que unos pocos minutos, alójalo en YouTube y usa el [componente `<YouTube>`](/es/content/youtube) en su lugar — la transmisión desde un CDN diseñado para vídeo siempre superará al servicio de archivos grandes desde tu documentación.

<Tip>
Comprime los vídeos antes de confirmarlos. Herramientas como [FFmpeg](https://ffmpeg.org/) y [Handbrake](https://handbrake.fr/) pueden reducir drásticamente el tamaño de los archivos sin pérdida de calidad visible: `ffmpeg -i input.mp4 -crf 28 -preset slow output.mp4`
</Tip>

## ¿Qué sigue?

<Columns cols={3}>
  <Card title="Imágenes" icon="image" href="/es/content/images">
    Imágenes Markdown, dimensiones y leyendas
  </Card>
  <Card title="Incrustaciones de YouTube" icon="youtube" href="/es/content/youtube">
    Vídeos y Shorts de YouTube
  </Card>
  <Card title="iFrames" icon="code" href="/es/content/iframes">
    Vimeo, CodePen, Figma y más
  </Card>
</Columns>