---
description: "Video element with source trimming, volume control, muting, and frame-accurate playback for Editframe compositions."
---
# ef-video
## Attributes
- **src** (string) (required) - URL or path to video source
- **sourcein** (timestring) - Absolute start time in source media
- **sourceout** (timestring) - Absolute end time in source media
- **trimstart** (timestring) - Duration to trim from start
- **trimend** (timestring) - Duration to trim from end
- **duration** (timestring) - Override element duration
- **mute** (boolean, default: false) - Silence the audio track
- **volume** (number, default: 1) - Audio volume (0.0 to 1.0)
# Video
Video element with source trimming.
Display video clips with optional trimming.
## Import
```tsx
import { Video } from "@editframe/react";
```
## Basic Usage
```html live
```
```tsx
```
## Trimming Approaches
Two ways to trim video -- choose based on your workflow:
### Absolute Trimming (sourcein/sourceout)
### Absolute Trimming (sourceIn/sourceOut)
Show specific timestamps from source. Use when you know exact timecodes.
```html live
```
```tsx
{/* Show seconds 10-20 from source (10s clip) */}
```
### Relative Trimming (trimstart/trimend)
### Relative Trimming (trimStart/trimEnd)
Remove time from start/end. Use when thinking "cut off X seconds".
```html live
```
```tsx
{/* Remove 2s from start, 3s from end */}
```
**When to use each:**
- `sourcein`/`sourceout` — Working with timecodes, precise frame references
- `trimstart`/`trimend` — UI builders, "how much to cut off" thinking
- `sourceIn`/`sourceOut` - Working with timecode, precise frame references
- `trimStart`/`trimEnd` - UI builders, "how much to cut off" thinking
## With Volume Control
```tsx
```
## Muted Video
```tsx
```
## Muted / Volume
```html
```
## Picture-in-Picture
```html live
```
## Full Scene Example
```tsx
import { Timegroup, Video, Text } from "@editframe/react";
export const VideoScene = () => {
return (
Video Title
);
};
```
## Object Fit
Use Tailwind classes for positioning:
```tsx
{/* Cover - fills container, may crop */}
{/* Contain - fits within container, may have letterbox */}
{/* Fill - stretches to fill */}
```
## Dynamic Videos
```tsx
interface VideoData {
id: string;
src: string;
sourceIn: string;
sourceOut: string;
}
const videos: VideoData[] = [
{ id: "1", src: "/assets/clip1.mp4", sourceIn: "0s", sourceOut: "5s" },
{ id: "2", src: "/assets/clip2.mp4", sourceIn: "3s", sourceOut: "8s" },
];
{videos.map((video) => (
))}
```
## Video Tutorial
Build a composition step by step — from a single clip to layered scenes.
### Step 1: Display a Basic Video
Place a video inside a root timegroup.
```html live
```
### Step 2: Trim a Video
Two approaches — choose based on your workflow.
**Relative trimming** removes time from edges:
```html live
```
**Absolute trimming** specifies exact timecodes:
```html live
```
See the [Trimming Video](#trimming-video) section for detailed guidance on choosing between them.
### Step 3: Create a Simple Sequence
Use `mode="sequence"` to play clips one after another. The timeline duration is the sum of all children.
```html live
```
### Step 4: Layer Videos with Text
Nest timegroups inside a sequence. Each child timegroup holds a video background and text overlay.
```html live
First Scene
Second Scene
```
> **Note:** The video uses `absolute` positioning with `z-0` as a background layer. Text uses `relative` positioning to appear on top.
### Next Steps
- See [Trimming Video](#trimming-video) for a trimming deep-dive
- See [Video Effects](#video-effects) for CSS filters and animations
## Trimming Video
Two approaches to show only part of a video source. Choose based on your workflow.
### Relative Trimming (trimstart / trimend)
Remove time from the edges. Think: "cut off 2 seconds from the start."
```html live
```
Duration formula: `sourceDuration - trimstart - trimend`
A 10s source with `trimstart="2s" trimend="3s"` produces a 5s clip.
### Absolute Trimming (sourcein / sourceout)
Specify exact timestamps. Think: "show seconds 2 through 6."
```html live
```
Duration formula: `sourceout - sourcein`
`sourcein="2s" sourceout="6s"` produces a 4s clip starting at the 2-second mark.
### When to Use Each
| Approach | Use when... |
|----------|-------------|
| `trimstart` / `trimend` | Building UI with drag handles or sliders |
| | Thinking "how much to cut off" |
| | Adjusting existing clip duration |
| `sourcein` / `sourceout` | Working with known timecodes |
| | Referencing specific moments by timestamp |
| | Frame-perfect accuracy needed |
### Trimmed Clips in a Sequence
Trimming is most useful when building sequences from different parts of source media:
```html live
```
> **Note:** Both approaches produce the same visual result — they differ in mental model and how `currentSourceTimeMs` tracks source position. Relative trimming maps as `trimstart + ownCurrentTimeMs`, absolute as `sourcein + ownCurrentTimeMs`.
## Video Effects
Apply visual effects to video using standard CSS. The video element renders to a canvas, so all CSS properties apply directly.
### CSS Filters
Use Tailwind filter utilities or inline styles:
```html live
```
Common filter classes:
| Effect | Class | Description |
|--------|-------|-------------|
| Blur | `blur-sm` / `blur-md` / `blur-lg` | Gaussian blur |
| Brightness | `brightness-50` / `brightness-150` | Darken or lighten |
| Contrast | `contrast-50` / `contrast-150` | Reduce or increase contrast |
| Grayscale | `grayscale` | Full desaturation |
| Sepia | `sepia` | Warm vintage tone |
| Saturate | `saturate-50` / `saturate-200` | Color intensity |
Combine multiple filters by listing classes:
```html
```
### CSS Transforms
Scale and rotate video elements:
```html live
```
### CSS Animations
Animate any CSS property over time using `@keyframes`:
```html live
```
Animations run relative to the video's timeline — they're fully scrubbable.
### Combining Effects
Layer static filters with animations for complex looks:
```html live
```
> **Note:** Static CSS classes (like `sepia`) combine with animation keyframes. The animation overrides only the properties it targets.