Vídeos
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  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>:
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:
<Video src="/_jd/videos/never-gonna-give-you-up.mp4?v=moa8o29o" 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:
<Video src="/_jd/videos/ui-demo.mp4?v=moa8o29o" 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.
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.
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> 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.