Composition

ef-video

Renders a video clip with optional source trim.

Renders a video clip. Use sourcein and sourceout to trim the source file.

Use CSS object-fit: cover | contain | fill to control how the video fills its box.

Interactive example

<ef-timegroup mode="fixed" duration="8s" class="w-[1920px] h-[1080px]">
  <ef-video
    src="https://assets.editframe.com/bars-n-tone.mp4"
    sourcein="2s"
    sourceout="10s"
    class="absolute inset-0 size-full"
    style="object-fit:cover;"
  ></ef-video>
  <ef-text
    duration="3s"
    offset="1s"
    class="absolute bottom-16 left-16 text-white text-5xl font-bold drop-shadow-xl"
  >
    trimmed clip, 2s–10s
  </ef-text>
</ef-timegroup>

Attributes

Filter attributes18 of 18

`duration`

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

`fft-decay`

React prop: fftDecay
Type: number
Default: 8
Description: Decay frames averaged into getFrequencyData (default 8).

`fft-gain`

React prop: fftGain
Type: number
Default: 3
Description: Linear gain applied before frequency analysis (default 3.0).

`fft-size`

React prop: fftSize
Type: number
Default: 128
Description: FFT window size for getFrequencyData/getTimeDomainData (rounded to a power of two, default 128).

`file-id`

React prop: fileId
Type: string | null
Default: —
Description: Cloud file identifier — resolves to ${apiHost}/api/v1/files/${fileId}, taking priority over src/variants.

`interpolate-frequencies`

React prop: interpolateFrequencies
Type: boolean
Default: false
Description: Smooths getFrequencyData bins by interpolating between FFT bands instead of nearest-neighbor sampling.

`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.

`mute`

React prop: muted
Type: boolean
Default: false
Description: Mutes the video's audio track.

`offset`

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

`play-role`

React prop: playRole
Type: low | high
Default: "high"
Description: Preferred variant-ladder quality tier during playback (as opposed to scrub).

`sourcein`

React prop: sourcein
Type: string
Default: —
Description: Start time within the source file (CSS time, e.g. "1.5s").

`sourceout`

React prop: sourceout
Type: string
Default: —
Description: End time within the source file (CSS time, e.g. "1.5s").

`src`

React prop: src
Type: string
Default: —
Description: URL of the source video file.

`trimend`

React prop: trimend
Type: string
Default: —
Description: Trims this much off the end of the source (CSS time).

`trimstart`

React prop: trimstart
Type: string
Default: —
Description: Trims this much off the start of the source (CSS time).

`variant-mode`

React prop: variantMode
Type: single-high | scrub-upgrade | multi-bitrate | scrub-plus-ladder
Default: "scrub-upgrade"
Description: Variant-ladder role-selection strategy when variants is set.

`variants`

React prop: variants
Type: string
Default: ""
Description: URL of a variant-ladder manifest (multiple resolutions/bitrates), used instead of src.

`volume`

React prop: volume
Type: number
Default: 1
Description: Audio volume (0.0 to 1.0).

CSS Parts

CSS parts
Part	Description
`canvas`	The frame-rendering canvas. This canvas is a light DOM child element, not a shadow DOM element.

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.
`variantchange`	`{ role: "scrub" \| "low" \| "high"; url: string; window: number \| null }`	Fires when the active decode variant changes, for example its role, its URL, or its scrub window.