ef-video

Renders a video clip with optional source trim.

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

Attribute	React prop	Type	Default	Description
`duration`	`duration`	`string`	—	How long this element is active (CSS time, e.g. `"5s"`).
`fft-decay`	`fftDecay`	`number`	`8`	Decay frames averaged into {@link getFrequencyData} (default 8).
`fft-gain`	`fftGain`	`number`	`3`	Linear gain applied before frequency analysis (default 3.0).
`fft-size`	`fftSize`	`number`	`128`	FFT window size for {@link getFrequencyData}/{@link getTimeDomainData} (rounded to a power of two, default 128).
`file-id`	`fileId`	`string \| null`	—	Cloud file identifier — resolves to `${apiHost}/api/v1/files/${fileId}`, taking priority over `src`/`variants`.
`interpolate-frequencies`	`interpolateFrequencies`	`boolean`	`false`	Smooths {@link getFrequencyData} bins by interpolating between FFT bands instead of nearest-neighbor sampling.
`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`.
`mute`	`muted`	`boolean`	`false`	Mutes the video's audio track.
`offset`	`offset`	`number`	—	Start offset (seconds) within a parallel (`fixed`/`contain`/`fit`) parent timegroup.
`play-role`	`playRole`	`low` \| `high`	`"high"`	Preferred variant-ladder quality tier during playback (as opposed to scrub).
`sourcein`	`sourcein`	`string`	—	Start time within the source file (CSS time, e.g. `"1.5s"`).
`sourceout`	`sourceout`	`string`	—	End time within the source file (CSS time, e.g. `"1.5s"`).
`src`	`src`	`string`	—	URL of the source video file.
`trimend`	`trimend`	`string`	—	Trims this much off the end of the source (CSS time).
`trimstart`	`trimstart`	`string`	—	Trims this much off the start of the source (CSS time).
`variant-mode`	`variantMode`	`single-high` \| `scrub-upgrade` \| `multi-bitrate` \| `scrub-plus-ladder`	`"scrub-upgrade"`	Variant-ladder role-selection strategy when {@link variants} is set.
`variants`	`variants`	`string`	`""`	URL of a variant-ladder manifest (multiple resolutions/bitrates), used instead of `src`.
`volume`	`volume`	`number`	`1`	Audio volume (0.0 to 1.0).

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

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

CSS Parts

Part	Description
`canvas`	The frame-rendering canvas (a light-DOM child, not shadow DOM).

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 (role/URL/scrub window) changes.