Vidéos
Intégrez des fichiers vidéo MP4 et WebM locaux dans votre documentation avec le composant Video ou la syntaxe Markdown.
Stockez vos 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 motif  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> :
C'est la façon la plus rapide d'insérer une vidéo dans une page. Vous obtenez un lecteur standard avec lecture/pause, volume, barre de progression et plein écran -- aucun prop supplémentaire nécessaire. Si vous souhaitez contrôler le comportement de lecture (lecture automatique, boucle, son coupé), utilisez le composant <Video> à la place.
Composant Video
Le composant <Video> expose les attributs vidéo HTML5 comme props, vous donnant le contrôle sur le comportement du lecteur :
<Video src="/_jd/videos/never-gonna-give-you-up.mp4?v=moa8o29o" 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 navigue. Incluez-en toujours un pour l'accessibilité.
Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
src | string | aucun | Obligatoire. Chemin vers le fichier vidéo. |
title | string | aucun | Étiquette d'accessibilité pour les lecteurs d'écran. |
controls | boolean | true | Afficher les contrôles de lecture natifs 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 (ex. : "400px", "100%"). |
height | string | aucun | Valeur CSS de hauteur. |
Remplacement des GIF
Les GIF animés grossissent rapidement -- un enregistrement d'interface de 5 secondes peut facilement atteindre 10 Mo en GIF mais rester sous 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=moa8o29o" autoPlay muted loop controls={false} />Le résultat ressemble et se comporte comme un GIF (lecture en ligne, boucle infinie, pas de contrôles) mais se charge bien plus rapidement et reste net à n'importe quelle résolution.
Les navigateurs bloquent la lecture automatique sans son coupé. Si vous définissez autoPlay sans muted, la vidéo ne se lancera pas -- elle restera sur la première image sans message d'erreur. Associez toujours les deux ensemble.
Formats pris en charge
| Format | Extension | Compatibilité 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 sûr par défaut. Tous les navigateurs et appareils le prennent en charge. WebM produit des fichiers plus petits mais Safari et iOS ne le supportent pas, ce qui signifie que les lecteurs mobiles sur appareils Apple ne voient rien.
Les fichiers vidéo peuvent aller jusqu'à 100 Mo. Pour tout ce qui dépasse quelques minutes, hébergez-le sur YouTube et utilisez le composant <YouTube> à la place -- le streaming depuis un CDN conçu pour la vidéo sera toujours plus performant que servir de gros fichiers depuis votre documentation.