# Video-Element

## 1. Struktur

```ts
interface VideoClip extends BaseClip {
  type: "video";
  src: string | { $ref: string };
  source?: {
    start?: number;
    end?: number;
  };
  volume?: number;
  muted?: boolean;
  playbackRate?: number;
}
```

## 2. Unterstützte Felder

### `src`
- Typ: `string | { $ref: string }`
- Erforderlich: ja
- Zweck: direkte Video-URL oder Referenz auf ein Video-Asset

### `source.start`
- Typ: `number`
- Erforderlich: nein
- Einheit: Sekunden
- Zweck: Startzeit innerhalb des Quellmediums zuschneiden

### `source.end`
- Typ: `number`
- Erforderlich: nein
- Einheit: Sekunden
- Zweck: Endzeit innerhalb des Quellmediums zuschneiden

### `volume`
- Typ: `number`
- Erforderlich: nein
- Standard: `1`

### `muted`
- Typ: `boolean`
- Erforderlich: nein
- Standard: `false`

### `playbackRate`
- Typ: `number`
- Erforderlich: nein
- Standard: `1`

## 3. Aktuelles Runtime-Verhalten

- `src` unterstützt direkte URLs
- `src` unterstützt `$ref`
- `source.start` funktioniert
- `source.end` funktioniert
- `muted: true` erzwingt eine effektive Lautstärke von `0`
- `source.end` beeinflusst die effektiv abspielbare Dauer des Clips

## 4. Gemeinsame Felder, die gut mit Video funktionieren

Du kannst `video` sicher kombinieren mit:
- `transform`
- `style`
- `zIndex`
- `animations`
- `keyframes`
- `transition`

Hinweise:
- `style.borderRadius` funktioniert
- `style.objectFit` funktioniert mit `fill / cover / contain`
- `style.filters` funktioniert
- `fill`: streckt auf den Zielbereich und kann verzerren
- `cover`: behält das Seitenverhältnis bei und kann beschneiden
- `contain`: behält das Seitenverhältnis bei und kann Letterboxing erzeugen

## 5. Beispiel

```json
{
  "type": "video",
  "start": 0,
  "duration": 6,
  "src": { "$ref": "hero-video" },
  "source": {
    "start": 2,
    "end": 8
  },
  "muted": true,
  "playbackRate": 1,
  "transform": {
    "x": "50%",
    "y": "50%",
    "width": "100%",
    "height": "100%"
  },
  "style": {
    "objectFit": "cover",
    "filters": [
      { "type": "blur", "value": 32 },
      { "type": "brightness", "value": 0.7 }
    ]
  },
  "transition": {
    "type": "fade",
    "duration": 0.2
  }
}
```