ef-captions

Renders caption text synchronized to the timeline.

Caption data format

{
  "segments": [
    { "start": 0, "end": 3.2, "text": "Welcome to Editframe." }
  ],
  "word_segments": [
    { "start": 0,   "end": 0.6, "text": "Welcome" },
    { "start": 0.6, "end": 0.9, "text": "to" },
    { "start": 0.9, "end": 1.8, "text": "Editframe." }
  ]
}

Attributes

Attribute	React prop	Type	Default	Description
`captions-script`	`captionsScript`	`string`	`""`	ID of a `<script type="application/json">` element containing caption data, as an alternative to {@link captionsSrc}.
`captions-src`	`captionsSrc`	`string`	`""`	URL or path to a JSON file with `segments`/`word_segments` caption data.
`duration`	`duration`	`string`	—	How long this element is active (CSS time, e.g. `"5s"`).
`loop`	`loop`	`boolean`	`false`	Loop attribute — when this temporal is a self-driving root under a {@link PlaybackController}, the controller wraps back to `0` instead of pausing at `duration`.
`offset`	`offset`	`number`	—	Start offset (seconds) within a parallel (`fixed`/`contain`/`fit`) parent timegroup.
`target`	`target`	`string`	`""`	ID of the `<ef-video>`/`<ef-audio>` element these captions are timed against.
`word-style`	`wordStyle`	`string`	`""`	Free-form styling hook (no built-in behavior) — mirrors `@editframe/elements`' `word-style` attribute so consumer CSS/selectors targeting it keep working (e.g. `ef-captions[word-style="highlight"]`).

Events

Event	Detail	Description
`child-duration-changed`	`{ duration: number }`	Fires on the nearest context-providing ancestor, when a nested media element's duration becomes known or changes.