Videos
Erfahren Sie, wie Sie MP4- und WebM-Videos mit Markdown oder der Video-Komponente in Jamdesk einbetten, mit Props für Autoplay, Schleife und Steuerelemente.
Speichern Sie .mp4- oder .webm-Dateien in einem Verzeichnis /videos innerhalb Ihres Projekts und referenzieren Sie sie direkt. Jamdesk rendert einen HTML5-Player mit Steuerelementen, abgerundeten Ecken und einheitlichen Abständen.
Die Screenshots zeigen die Benutzeroberfläche auf Englisch.
Markdown-Syntax
Dasselbe Muster , das Sie für Bilder verwenden, funktioniert auch für Videodateien. Jamdesk prüft die Dateiendung und rendert statt eines <img loading="lazy">-Tags einen Videoplayer:
Sie erhalten einen Standard-Player mit Wiedergabe/Pause, Lautstärke, Fortschrittsleiste und Vollbild. Verwenden Sie die Komponente <Video>, um die Wiedergabe zu steuern (Autoplay, Schleife, Stummschaltung).
Video-Komponente
Die Komponente <Video> stellt HTML5-Video-Attribute als Props bereit:
<Video src="/_jd/videos/never-gonna-give-you-up.mp4?v=mw83zxfs" title="Rick Astley" />Das Prop title legt das aria-label am Video-Element fest. Screenreader verkünden dieses Label. Fügen Sie es immer hinzu.
Props
| Prop | Typ | Standard | Beschreibung |
|---|---|---|---|
src | string | keiner | Erforderlich. Pfad zur Videodatei. |
title | string | keiner | Barrierefreiheits-Label für Screenreader. |
controls | boolean | true | Die integrierten Player-Steuerelemente des Browsers anzeigen. |
autoPlay | boolean | false | Beginnt mit der Wiedergabe, sobald das Video sichtbar ist. |
muted | boolean | false | Startet mit stummgeschaltetem Ton. |
loop | boolean | false | Startet wieder am Anfang, wenn das Video endet. |
width | string | keiner | CSS-Breitenwert (z. B. "400px", "100%"). |
height | string | keiner | CSS-Höhenwert. |
GIFs ersetzen
Eine 5-Sekunden-UI-Aufnahme kann als GIF 10 MB erreichen und als MP4 unter 500 KB bleiben. Ersetzen Sie GIFs durch ein stummes, sich wiederholendes Video und blenden Sie die Player-Oberfläche aus:
<Video src="/_jd/videos/ui-demo.mp4?v=mw83zxfs" autoPlay muted loop controls={false} />Das Ergebnis verhält sich wie ein GIF (spielt inline, wiederholt sich endlos, ohne Steuerelemente). Es lädt schneller und bleibt bei jeder Auflösung scharf.
Browser blockieren Autoplay mit Ton. Ein Video mit autoPlay und ohne muted wird nicht abgespielt. Es bleibt ohne Fehlermeldung auf dem ersten Bild stehen. Setzen Sie bei autoPlay immer muted.
Unterstützte Formate
| Format | Erweiterung | Browser-Unterstützung |
|---|---|---|
| MP4 (H.264) | .mp4 | Alle Browser, einschließlich Safari und iOS |
| WebM (VP9) | .webm | Chrome, Firefox, Edge. Kleinere Dateien bei vergleichbarer Qualität |
MP4 ist die sichere Standardwahl. Jeder Browser und jedes Gerät spielt es ab. WebM erzeugt kleinere Dateien. Safari und iOS spielen WebM nicht ab. Leser auf Apple-Geräten sehen nichts.
Videodateien können bis zu 100 MB groß sein. Hosten Sie alles, was länger als ein paar Minuten ist, auf YouTube und verwenden Sie stattdessen die <YouTube>-Komponente. Ein für Video ausgelegtes CDN streamt es schneller, als Ihre Dokumentation eine große Datei ausliefern kann.