Videos
Aprende a insertar videos MP4 y WebM en Jamdesk con Markdown o el componente Video, con props para autoplay, loop y controles.
Guarda los 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 de Markdown
El mismo patrón  que usas para imágenes funciona para archivos de video. Jamdesk revisa la extensión del archivo y renderiza un reproductor de video en lugar de una etiqueta <img loading="lazy">:
Esta es la forma más rápida de insertar un video en una página. Obtienes un reproductor estándar con reproducir/pausar, volumen, barra de progreso y pantalla completa. No necesitas props adicionales. Si quieres controlar el comportamiento de reproducción (autoplay, loop, silenciado), usa el componente <Video> en su lugar.
Componente Video
El componente <Video> expone los atributos de video HTML5 como props, dándote control sobre el comportamiento del reproductor:
<Video src="/_jd/videos/never-gonna-give-you-up.mp4?v=mrtvmucv" title="Rick Astley" />El prop title establece el aria-label en el elemento de video, que los lectores de pantalla anuncian cuando un usuario navega hasta él. Inclúyelo siempre por accesibilidad.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | none | Obligatorio. Ruta al archivo de video. |
title | string | none | 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 video es visible. |
muted | boolean | false | Empieza con el audio silenciado. |
loop | boolean | false | Reinicia desde el principio cuando el video termina. |
width | string | none | Valor de ancho CSS (por ejemplo, "400px", "100%"). |
height | string | none | Valor de alto CSS. |
Reemplazo de GIFs
Los GIFs animados aumentan de tamaño rápidamente: una grabación de 5 segundos de la interfaz puede llegar fácilmente a 10MB como GIF, pero quedarse por debajo de 500KB como MP4. Reemplaza los GIFs con un video silencioso en bucle y oculta los controles del reproductor:
<Video src="/_jd/videos/ui-demo.mp4?v=mrtvmucv" autoPlay muted loop controls={false} />El resultado se ve y se comporta como un GIF (se reproduce en línea, hace loop indefinidamente, 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 defines autoPlay sin muted, el video no se reproducirá; se quedará en el primer fotograma sin ningún error. Combina siempre ambos.
Formatos compatibles
| Format | Extension | Browser Support |
|---|---|---|
| MP4 (H.264) | .mp4 | Todos los navegadores, incluyendo Safari e iOS |
| WebM (VP9) | .webm | Chrome, Firefox, Edge. Archivos más pequeños con calidad comparable |
MP4 es la opción segura por defecto. Todos los navegadores y dispositivos lo admiten. WebM produce archivos más pequeños, pero Safari e iOS no lo soportan, lo que significa que los lectores móviles en dispositivos Apple no ven nada.
Los archivos de video pueden tener hasta 100MB. Para cualquier cosa más larga que unos minutos, alójalo en YouTube y usa el componente <YouTube> en su lugar, ya que la transmisión desde un CDN diseñado para video siempre superará el rendimiento de servir archivos grandes desde tus docs.