Referência de elementos

Elemento de vídeo

1. Estrutura

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

2. Campos suportados

src

  • Tipo: string | { $ref: string }
  • Obrigatório: sim
  • Finalidade: URL direta do vídeo ou referência para um asset de vídeo

source.start

  • Tipo: number
  • Obrigatório: não
  • Unidade: segundos
  • Finalidade: cortar o ponto inicial dentro da mídia de origem

source.end

  • Tipo: number
  • Obrigatório: não
  • Unidade: segundos
  • Finalidade: cortar o ponto final dentro da mídia de origem

volume

  • Tipo: number
  • Obrigatório: não
  • Padrão: 1

muted

  • Tipo: boolean
  • Obrigatório: não
  • Padrão: false

playbackRate

  • Tipo: number
  • Obrigatório: não
  • Padrão: 1

3. Comportamento atual do runtime

  • src suporta URLs diretas
  • src suporta $ref
  • source.start funciona
  • source.end funciona
  • muted: true força o volume efetivo para 0
  • source.end afeta a duração efetivamente reproduzível do clip

4. Campos compartilhados que funcionam bem com vídeo

Você pode combinar video com segurança com:

  • transform
  • style
  • zIndex
  • animations
  • keyframes
  • transition

Notas:

  • style.borderRadius funciona
  • style.objectFit funciona com fill / cover / contain
  • style.filters funciona
  • fill: estica para a caixa de destino e pode distorcer
  • cover: preserva a proporção e pode cortar
  • contain: preserva a proporção e pode deixar faixas vazias

5. Exemplo

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