82 lines
2.0 KiB
Markdown
82 lines
2.0 KiB
Markdown
If the video being created is a multi-scene video, it should be structured in a special way.
|
|
Create a new folder and put each scene in a separate file.
|
|
|
|
```tsx
|
|
// SceneA.tsx
|
|
export const SceneA: React.FC = () => {
|
|
return // ...
|
|
}
|
|
```
|
|
|
|
```tsx
|
|
// SceneB.tsx
|
|
export const SceneB: React.FC = () => {
|
|
return // ...
|
|
}
|
|
```
|
|
|
|
Install `@remotion/transitions` if not yet available:
|
|
|
|
```
|
|
npx remotion add @remotion/transitions
|
|
```
|
|
|
|
// MyVideo.tsx
|
|
```tsx
|
|
import {TransitionSeries} from '@remotion/transitions';
|
|
|
|
const MyVideo: React.FC = () => {
|
|
return (
|
|
<TransitionSeries>
|
|
<TransitionSeries.Sequence durationInFrames={4 * fps} name="SceneA">
|
|
<SceneA />
|
|
</TransitionSeries.Sequence>
|
|
<TransitionSeries.Sequence durationInFrames={4 * fps} name="SceneB">
|
|
<SceneB />
|
|
</TransitionSeries.Sequence>
|
|
</TransitionSeries>
|
|
)
|
|
}
|
|
```
|
|
|
|
It could also make sense to register each scene individually in the root file so it can be edited there.
|
|
If a composition with the same component is registered, one can double click the sequence in the main composition and jump to that composition.
|
|
|
|
```tsx
|
|
export const Root: React.FC = () => {
|
|
return (
|
|
<>
|
|
<Folder id="MyVideo-Scenes">
|
|
<Composition
|
|
id="Scene1"
|
|
component={Scene1}
|
|
durationInFrames={5 * fps}
|
|
fps={30}
|
|
width={1920}
|
|
height={1080}
|
|
/>
|
|
<Composition
|
|
id="Scene2"
|
|
component={Scene2}
|
|
durationInFrames={5 * fps}
|
|
fps={30}
|
|
width={1920}
|
|
height={1080}
|
|
/>
|
|
</Folder>
|
|
<Composition
|
|
id="MyVideo"
|
|
component={MyVideo}
|
|
durationInFrames={10 * fps}
|
|
fps={30}
|
|
width={1920}
|
|
height={1080}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
This allows the user to trim the start and end of the durations visually and add [transitions](./transitions.md) later.
|
|
Prefer inlining the `durationInFrames` values, because only then they are editable. It's okay if the value is redundant.
|