67 lines
3.3 KiB
Markdown
67 lines
3.3 KiB
Markdown
Remotion can be used for bare-bones video editing in the Studio. Choose the source structure based on the editing behavior you want:
|
|
|
|
- Use independently positioned clips when moving or resizing one clip should not affect any other clip.
|
|
- Use ripple editing when changing one clip's duration should reposition every clip after it.
|
|
|
|
Keep every editable clip as its own authored JSX node. Do not generate editable clips with `.map()` or another programmatic loop.
|
|
|
|
## Independently positioned clips
|
|
|
|
Place every `<Video>` directly in the composition and hardcode its timing props. `from={0}` may be omitted:
|
|
|
|
```tsx
|
|
<Video src="https://remotion.media/video.mp4" trimBefore={0} durationInFrames={78} />
|
|
<Video src="https://remotion.media/video.webm" trimBefore={12} from={78} durationInFrames={66} />
|
|
<Video src="https://remotion.media/video.mp4" trimBefore={72} from={144} durationInFrames={90} />
|
|
<Video src="https://remotion.media/video.webm" trimBefore={58} from={234} durationInFrames={72} />
|
|
<Video src="https://remotion.media/video.mp4" trimBefore={180} from={306} durationInFrames={60} />
|
|
```
|
|
|
|
- `from` is the clip's absolute start frame in its parent timeline.
|
|
- `durationInFrames` is how many frames the clip remains visible.
|
|
- `trimBefore` is how many source frames are skipped before playback begins.
|
|
- Each `<Video>` must be a separate JSX node. Add a descriptive `name` when useful in the Studio timeline.
|
|
- `from`, `durationInFrames`, and `trimBefore` must be hardcoded frame values. Do not compute them.
|
|
- Import `<Video>` from `@remotion/media`.
|
|
|
|
Moving or resizing one of these clips does not reposition later clips. Gaps and overlaps are therefore allowed.
|
|
|
|
## Ripple editing with `TransitionSeries`
|
|
|
|
“Ripple editing” is the standard video-editing term for changing one clip and automatically shifting everything after it.
|
|
In Remotion, a `<TransitionSeries>` provides this sequential, cascading timing model while also allowing transitions between clips.
|
|
|
|
Read [transitions.md](transitions.md) for transition types, timing options, installation instructions, and composition-duration calculation.
|
|
|
|
Keep the markup like this:
|
|
|
|
```tsx
|
|
<TransitionSeries name="Video timeline">
|
|
<TransitionSeries.Sequence name="Clip 1" durationInFrames={39}>
|
|
<Video
|
|
src="https://remotion.media/video.mp4"
|
|
trimBefore={0}
|
|
/>
|
|
</TransitionSeries.Sequence>
|
|
<TransitionSeries.Sequence name="Clip 2" durationInFrames={45}>
|
|
<Video
|
|
src="https://remotion.media/video.webm"
|
|
trimBefore={8}
|
|
/>
|
|
</TransitionSeries.Sequence>
|
|
<TransitionSeries.Sequence name="Clip 3" durationInFrames={43}>
|
|
<Video
|
|
src="https://remotion.media/video.mp4"
|
|
trimBefore={60}
|
|
/>
|
|
</TransitionSeries.Sequence>
|
|
</TransitionSeries>
|
|
```
|
|
|
|
- The `<TransitionSeries.Sequence>` is the editable clip row in the Studio timeline.
|
|
- Dragging its right edge changes `durationInFrames` and repositions every later sequence.
|
|
- Do not set `from` on `<TransitionSeries.Sequence>`; the series calculates each start frame.
|
|
- Hardcode all numeric values.
|
|
- Do not programmatically create multiple `<TransitionSeries.Sequence>` (no `.map`). Each instance must be hard-coded.
|
|
- Import `<Video>` from `@remotion/media`. Import `<TransitionSeries>` from `@remotion/transitions`. If needing to install: `npx remotion add @remotion/media @remotion/transitions`
|