Vidéos
Apprenez à intégrer des vidéos MP4 et WebM dans Jamdesk via Markdown ou le composant Video, avec des props pour l'autoplay, la boucle et les contrôles.
Stockez les fichiers .mp4 ou .webm dans un répertoire /videos à l'intérieur de votre projet et référencez-les directement. Jamdesk affiche un lecteur HTML5 avec des contrôles, des coins arrondis et un espacement cohérent.
Les captures d'écran montrent l'interface en anglais.
Syntaxe Markdown
Le même modèle  que vous utilisez pour les images fonctionne pour les fichiers vidéo. Jamdesk vérifie l'extension du fichier et affiche un lecteur vidéo au lieu d'une balise <img loading="lazy"> :
C'est le moyen le plus rapide d'ajouter une vidéo à une page. Vous obtenez un lecteur standard avec lecture/pause, volume, barre de progression et plein écran. Aucune prop supplémentaire n'est nécessaire. Si vous souhaitez contrôler le comportement de lecture (autoplay, boucle, muet), utilisez plutôt le composant <Video>.
Composant Video
Le composant <Video> expose les attributs vidéo HTML5 sous forme de props, vous donnant le contrôle sur le comportement du lecteur :
<Video src="/_jd/videos/never-gonna-give-you-up.mp4?v=mrtvmucv" title="Rick Astley" />La prop title définit l'aria-label sur l'élément vidéo, que les lecteurs d'écran annoncent lorsqu'un utilisateur y accède. Incluez-en toujours une pour l'accessibilité.
Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
src | string | aucun | Requis. Chemin vers le fichier vidéo. |
title | string | aucun | Libellé d'accessibilité pour les lecteurs d'écran. |
controls | boolean | true | Afficher les contrôles intégrés du lecteur du navigateur. |
autoPlay | boolean | false | Commencer la lecture dès que la vidéo est visible. |
muted | boolean | false | Démarrer avec le son coupé. |
loop | boolean | false | Redémarrer depuis le début lorsque la vidéo se termine. |
width | string | aucun | Valeur CSS de largeur (par exemple, "400px", "100%"). |
height | string | aucun | Valeur CSS de hauteur. |
Remplacement des GIF
Les GIF animés gonflent rapidement en taille de fichier : un enregistrement d'interface de 5 secondes peut facilement atteindre 10 Mo en GIF mais rester sous les 500 Ko en MP4. Remplacez les GIF par une vidéo silencieuse en boucle et masquez les contrôles du lecteur :
<Video src="/_jd/videos/ui-demo.mp4?v=mrtvmucv" autoPlay muted loop controls={false} />Le résultat ressemble à un GIF et se comporte comme tel (lecture en ligne, boucle infinie, aucun contrôle) mais se charge bien plus rapidement et reste net à toute résolution.
Les navigateurs bloquent l'autoplay non muet. Si vous définissez autoPlay sans muted, la vidéo ne se lancera pas ; elle restera sur la première image sans erreur. Associez toujours les deux.
Formats pris en charge
| Format | Extension | Prise en charge navigateur |
|---|---|---|
| MP4 (H.264) | .mp4 | Tous les navigateurs, y compris Safari et iOS |
| WebM (VP9) | .webm | Chrome, Firefox, Edge. Fichiers plus petits à qualité comparable |
MP4 est le choix par défaut sûr. Tous les navigateurs et appareils le prennent en charge. WebM produit des fichiers plus petits, mais Safari et iOS ne le prennent pas en charge, ce qui signifie que les lecteurs mobiles sur appareils Apple ne voient rien.
Les fichiers vidéo peuvent atteindre jusqu'à 100 Mo. Pour tout ce qui dépasse quelques minutes, hébergez-les sur YouTube et utilisez plutôt le composant <YouTube>, car diffuser depuis un CDN conçu pour la vidéo sera toujours plus performant que de servir des fichiers volumineux depuis votre documentation.