Élément sous-titre

1. Structure

type SubtitleSource =
  | SubtitleWord[]
  | { $ref: string }
  | { src: string };

interface SubtitleClip extends BaseClip {
  type: "subtitle";
  words: SubtitleSource;
  config?: SubtitleConfig;
}

Prend aussi en charge :

opacity
animations
keyframes
transition
transform
zIndex

2. `SubtitleWord`

interface SubtitleWord {
  word: string;
  punctuated_word: string;
  start: number;
  end: number;
  confidence?: number;
}

3. Sources de sous-titres prises en charge

Tableau inline

{
  "words": [
    {
      "word": "hello",
      "punctuated_word": "Hello",
      "start": 0,
      "end": 0.4
    }
  ]
}

Ressource de sous-titres via `$ref`

{
  "words": { "$ref": "subtitle-main" }
}

URL externe

{
  "words": { "src": "https://example.com/subtitle.json" }
}

4. Règles pour les URL externes de sous-titres

Le point d'accès distant doit renvoyer du JSON dans l'une de ces formes :

SubtitleWord[]
{ "words": SubtitleWord[] }

Comportement public :

Le flux de preview accepte words: { "src": "..." }
La lecture en preview normalise les données de sous-titres avant lecture
Si vous envoyez { src } directement dans un renderer plus bas niveau, les données de sous-titres ne sont pas récupérées automatiquement

5. `SubtitleConfig`

interface SubtitleConfig {
  mode?: "batch" | "stream";
  wordsPerBatch?: number;
  fontSize?: number;
  fontFamily?: string;
  fontWeight?: number | string;
  textAlign?: "left" | "center" | "right";
  textBoxWidth?: number | string;
  textColor?: string;
  highlightColor?: string;
  backgroundColor?: string;
  shadowColor?: string;
  shadowBlur?: number;
  borderColor?: string;
  borderWidth?: number;
  fadeInAnimation?: boolean;
  position?: "bottom" | "top" | "center";
  paddingBottom?: number;
}

6. Champs de configuration actuellement implémentés

mode
wordsPerBatch
fontSize
fontFamily
fontWeight
textAlign
textBoxWidth
textColor
highlightColor
backgroundColor
shadowColor
shadowBlur
borderColor
borderWidth
fadeInAnimation
position
paddingBottom

7. Comportement des modes

`batch`

Affiche les sous-titres par groupes
Met en évidence le mot actuellement prononcé

`stream`

Révèle les mots un par un

8. Comportement des animations sur le bloc entier

L'animation au niveau du conteneur s'applique à tout le bloc de sous-titres, pas à la logique de surlignage mot par mot.

Distinction importante :

config.fadeInAnimation contrôle le fondu à l'intérieur des lots de sous-titres
animations / keyframes / transition contrôlent l'ensemble du conteneur de sous-titres

Cela signifie que vous pouvez animer le bloc de sous-titres lui-même avec un fade, un slide ou un déplacement sans modifier la logique interne de surlignage des mots.

9. Exemple

{
  "type": "subtitle",
  "start": 0,
  "duration": 8,
  "words": { "$ref": "sub-main" },
  "animations": [
    { "type": "slideIn", "duration": 0.4, "direction": "up" }
  ],
  "config": {
    "position": "bottom",
    "fontSize": 60,
    "highlightColor": "#22d3ee",
    "backgroundColor": "rgba(0,0,0,0.4)"
  }
}

On this page