Composition

ef-captions

Renders caption text synchronized to the timeline.

Caption data format

json

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

Filter attributes7 of 7

`captions-script`

React prop: captionsScript
Type: string
Default: ""
Description: ID of a <script type="application/json"> element containing caption data, as an alternative to captionsSrc.

`captions-src`

React prop: captionsSrc
Type: string
Default: ""
Description: URL or path to a JSON file with segments/word_segments caption data.

`duration`

React prop: duration
Type: string
Default: —
Description: How long this element is active (CSS time, e.g. "5s").

`loop`

React prop: loop
Type: boolean
Default: false
Description: Loop attribute — when this temporal is a self-driving root under a PlaybackController, the controller wraps back to 0 instead of pausing at duration.

`offset`

React prop: offset
Type: number
Default: —
Description: Start offset (seconds) within a parallel (fixed/contain/fit) parent timegroup.

`target`

React prop: target
Type: string
Default: ""
Description: ID of the <ef-video>/<ef-audio> element these captions are timed against.

`word-style`

React prop: wordStyle
Type: string
Default: ""
Description: 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

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.