Chapter 224: <OffthreadVideo>

Core Idea

This component imports and displays a video, similar to <Html5Video/>, but during rendering, extracts the exact frame from the video and displays it in a <Img> tag. This extraction process happens outside the browser using FFmpeg.

Key Concepts

• Example
• Props
• src
• trimBefore?<AvailableFrom v="4.0.319"/>
• trimAfter?<AvailableFrom v="4.0.319"/>
• startFrom?
• endAt?
• transparent?<AvailableFrom v="4.0.0" />

Code Examples

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for <OffthreadVideo> from the official docs.

Key Takeaways

1. Understand example when working with <OffthreadVideo>.
2. Understand props when working with <OffthreadVideo>.
3. Understand src when working with <OffthreadVideo>.
4. Understand trimbefore?<availablefrom v="4.0.319"/> when working with <OffthreadVideo>.
5. Understand trimafter?<availablefrom v="4.0.319"/> when working with <OffthreadVideo>.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.