Video
Scopri come incorporare video MP4 e WebM in Jamdesk usando Markdown o il componente Video, con proprietà per autoplay, loop e controlli.
Archivia i file .mp4 o .webm in una directory /videos all'interno del progetto e fai riferimento direttamente a questi file. Jamdesk visualizza un lettore HTML5 con controlli, angoli arrotondati e spaziatura uniforme.
Gli screenshot mostrano l'interfaccia in inglese.
Sintassi Markdown
Lo stesso schema  che usi per le immagini funziona anche per i file video. Jamdesk controlla l'estensione del file e visualizza un lettore video invece di un tag <img loading="lazy">:
Questo è il modo più rapido per inserire un video in una pagina. Ottieni un lettore standard con riproduzione/pausa, volume, barra di avanzamento e modalità a schermo intero. Non servono proprietà aggiuntive. Se vuoi controllare il comportamento della riproduzione, ad esempio l'avvio automatico, la ripetizione o il silenziamento, usa invece il componente <Video>.
Componente Video
Il componente <Video> espone gli attributi video HTML5 come proprietà, permettendoti di controllare il comportamento del lettore:
<Video src="/_jd/videos/never-gonna-give-you-up.mp4?v=msuxsk5d" title="Rick Astley" />La proprietà title imposta l'aria-label sull'elemento video, che gli screen reader annunciano quando l'utente vi accede. Includila sempre per garantire l'accessibilità.
Proprietà
| Proprietà | Tipo | Predefinito | Descrizione |
|---|---|---|---|
src | string | none | Obbligatoria. Percorso del file video. |
title | string | none | Etichetta di accessibilità per gli screen reader. |
controls | boolean | true | Mostra i controlli integrati del lettore del browser. |
autoPlay | boolean | false | Avvia la riproduzione non appena il video è visibile. |
muted | boolean | false | Avvia il video con l'audio disattivato. |
loop | boolean | false | Riavvia dall'inizio quando il video termina. |
width | string | none | Valore CSS della larghezza, ad esempio "400px" o "100%". |
height | string | none | Valore CSS dell'altezza. |
Sostituire le GIF
Le GIF animate aumentano rapidamente le dimensioni dei file: una registrazione dell'interfaccia di 5 secondi può facilmente raggiungere 10 MB come GIF, ma rimanere sotto i 500 KB come MP4. Sostituisci le GIF con un video senza audio in riproduzione continua e nascondi i controlli del lettore:
<Video src="/_jd/videos/ui-demo.mp4?v=msuxsk5d" autoPlay muted loop controls={false} />Il risultato ha l'aspetto e il comportamento di una GIF (viene riprodotto in linea, si ripete all'infinito e non presenta controlli), ma si carica molto più rapidamente e rimane nitido a qualsiasi risoluzione.
I browser bloccano la riproduzione automatica con audio. Se imposti autoPlay senza muted, il video non verrà riprodotto: resterà sul primo fotogramma senza mostrare errori. Associa sempre entrambe le proprietà.
Formati supportati
| Formato | Estensione | Supporto dei browser |
|---|---|---|
| MP4 (H.264) | .mp4 | Tutti i browser, inclusi Safari e iOS |
| WebM (VP9) | .webm | Chrome, Firefox, Edge. File più piccoli a parità di qualità |
MP4 è l'impostazione predefinita più sicura. È gestito da ogni browser e dispositivo. WebM produce file più piccoli, ma Safari e iOS non lo supportano: gli utenti da dispositivi Apple non vedranno nulla.
I file video possono avere dimensioni fino a 100 MB. Per qualsiasi video più lungo di alcuni minuti, ospitalo su YouTube e usa invece il componente <YouTube>, poiché lo streaming da una CDN progettata per i video sarà sempre più efficiente della distribuzione di file di grandi dimensioni dalla documentazione.