Videos
Erfahren Sie, wie Sie MP4- und WebM-Videos in Jamdesk mit Markdown oder der Video-Komponente einbetten – inklusive Autoplay, Schleife und Steuerelementen.
Speichern Sie .mp4- oder .webm-Dateien in einem Verzeichnis /videos innerhalb Ihres Projekts und verweisen Sie direkt darauf. 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 Dateierweiterung und rendert statt eines <img loading="lazy">-Tags einen Videoplayer:
Dies ist der schnellste Weg, ein Video in eine Seite einzufügen. Sie erhalten einen Standardplayer mit Wiedergabe/Pause, Lautstärkeregelung, Fortschrittsbalken und Vollbildmodus. Es sind keine zusätzlichen Props erforderlich. Wenn Sie das Wiedergabeverhalten steuern möchten (Autoplay, Schleifenwiedergabe, Stummschaltung), verwenden Sie stattdessen die <Video>-Komponente.
Video-Komponente
Die <Video>-Komponente stellt HTML5-Videoattribute als Props bereit und gibt Ihnen Kontrolle über das Verhalten des Players:
<Video src="/_jd/videos/never-gonna-give-you-up.mp4?v=msp3nl3i" title="Rick Astley" />Die title-Prop legt das aria-label-Attribut des Videoelements fest, das Screenreader ankündigen, wenn ein Benutzer dorthin navigiert. Fügen Sie aus Gründen der Barrierefreiheit immer einen Wert hinzu.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | none | Erforderlich. Pfad zur Videodatei. |
title | string | none | Barrierefreiheitsbezeichnung für Screenreader. |
controls | boolean | true | Die integrierten Player-Steuerelemente des Browsers anzeigen. |
autoPlay | boolean | false | Die Wiedergabe starten, sobald das Video sichtbar ist. |
muted | boolean | false | Mit stummgeschaltetem Ton starten. |
loop | boolean | false | Nach dem Ende des Videos von vorn beginnen. |
width | string | none | CSS-Breitenwert (z. B. "400px", "100%"). |
height | string | none | CSS-Höhenwert. |
GIFs ersetzen
Animierte GIFs werden schnell sehr groß: Eine 5-sekündige UI-Aufzeichnung kann als GIF problemlos 10 MB erreichen, als MP4 jedoch unter 500 KB bleiben. Ersetzen Sie GIFs durch ein stummgeschaltetes Video in einer Endlosschleife und blenden Sie die Player-Steuerelemente aus:
<Video src="/_jd/videos/ui-demo.mp4?v=msp3nl3i" autoPlay muted loop controls={false} />Das Ergebnis sieht aus und verhält sich wie ein GIF (Inline-Wiedergabe, Endlosschleife, keine Steuerelemente), wird jedoch wesentlich schneller geladen und bleibt bei jeder Auflösung scharf.
Browser blockieren Autoplay mit Ton. Wenn Sie autoPlay ohne muted festlegen, wird das Video nicht abgespielt, sondern bleibt ohne Fehlermeldung beim ersten Frame stehen. Verwenden Sie die beiden Props immer zusammen.
Unterstützte Formate
| Format | Extension | Browser Support |
|---|---|---|
| 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 unterstützt es. WebM erzeugt kleinere Dateien, wird jedoch von Safari und iOS nicht unterstützt. Daher sehen mobile Leser auf Apple-Geräten nichts.
Videodateien können bis zu 100 MB groß sein. Hosten Sie Videos, die länger als einige Minuten sind, auf YouTube und verwenden Sie stattdessen die <YouTube>-Komponente, da das Streaming über ein für Videos ausgelegtes CDN immer leistungsfähiger ist als das Bereitstellen großer Dateien aus Ihrer Dokumentation.