---
title: Videos
description: >-
  Erfahren Sie, wie Sie MP4- und WebM-Videos in Jamdesk mit Markdown oder der Video-Komponente einbetten – inklusive Autoplay, Schleife und Steuerelementen.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

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 `![alt](path)`, das Sie für Bilder verwenden, funktioniert auch für Videodateien. Jamdesk prüft die Dateierweiterung und rendert statt eines `<img>`-Tags einen Videoplayer:

```markdown
![Never Gonna Give You Up](/videos/never-gonna-give-you-up.mp4)
```

![Never Gonna Give You Up](/videos/never-gonna-give-you-up.mp4)

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:

```mdx
<Video src="/videos/never-gonna-give-you-up.mp4" title="Rick Astley" />
```

<Video src="/videos/never-gonna-give-you-up.mp4" 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:

```mdx
<Video src="/videos/ui-demo.mp4" 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.

<Note>
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.
</Note>

## 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](/de/content/youtube), da das Streaming über ein für Videos ausgelegtes CDN immer leistungsfähiger ist als das Bereitstellen großer Dateien aus Ihrer Dokumentation.

<Tip>
Komprimieren Sie Videos, bevor Sie sie committen. Tools wie [FFmpeg](https://ffmpeg.org/) und [Handbrake](https://handbrake.fr/) können die Dateigröße ohne sichtbaren Qualitätsverlust erheblich reduzieren: `ffmpeg -i input.mp4 -crf 28 -preset slow output.mp4`
</Tip>

## Wie geht es weiter?

<Columns cols={3}>
  <Card title="Bilder" icon="image" href="/de/content/images">
    Markdown-Bilder, Abmessungen und Bildunterschriften
  </Card>
  <Card title="YouTube-Einbettungen" icon="youtube" href="/de/content/youtube">
    YouTube-Videos und Shorts
  </Card>
  <Card title="iFrames" icon="code" href="/de/content/iframes">
    Vimeo, CodePen, Figma und mehr
  </Card>
</Columns>