ef-video

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.

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

Playback speed

In Elements 0.60.34 or later, set playback-rate from 0.25 to 4 to slow down or speed up the source. It defaults to 1, and the video's audio keeps its pitch in preview and export.

<ef-video
  src="https://assets.editframe.com/bars-n-tone.mp4"
  sourcein="2s"
  sourceout="10s"
  playback-rate="2"
></ef-video>

This four-second clip uses source seconds 2 through 10. In JavaScript and React, use the numeric playbackRate property. Invalid HTML attribute values fall back to 1; invalid property assignments throw a RangeError.

See media speed and source time for duration rules. Video also supports volume and the volumeAtTime fade callback described under audio volume and fades.