Élément vidéo

1. Structure

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

2. Champs pris en charge

`src`

Type : string | { $ref: string }
Requis : oui
Rôle : URL vidéo directe ou référence vers une ressource vidéo

`source.start`

Type : number
Requis : non
Unité : secondes
Rôle : découper le point de départ dans la source

`source.end`

Type : number
Requis : non
Unité : secondes
Rôle : découper le point de fin dans la source

`volume`

Type : number
Requis : non
Valeur par défaut : 1

`muted`

Type : boolean
Requis : non
Valeur par défaut : false

`playbackRate`

Type : number
Requis : non
Valeur par défaut : 1

3. Comportement actuel du runtime

src prend en charge les URL directes
src prend en charge $ref
source.start fonctionne
source.end fonctionne
muted: true force le volume effectif à 0
source.end affecte la durée réellement lisible du clip

4. Champs partagés qui fonctionnent bien avec la vidéo

Vous pouvez combiner video sans risque avec :

transform
style
zIndex
animations
keyframes
transition

Notes :

style.borderRadius fonctionne
style.objectFit fonctionne avec fill / cover / contain
style.filters fonctionne
fill : étire dans la zone cible et peut déformer
cover : conserve le ratio et peut rogner
contain : conserve le ratio et peut laisser des bandes vides

5. Exemple

{
  "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
  }
}

On this page