Chapter 673: Importing .srt subtitles into Remotion

Core Idea

If you have an existing . srt subtitle file, you can import it into Remotion using parseSrt() from @remotion/captions.

Key Concepts

• Reading an .srt file
• Using imported captions
• See also

Code Examples

export const MyComponent: React.FC = () => {
  const [captions, setCaptions] = useState<Caption[] | null>(null);
  const {delayRender, continueRender, cancelRender} = useDelayRender();
  const [handle] = useState(() => delayRender());

  const fetchCaptions = useCallback(async () => {
    try {
      const response = await fetch(staticFile('subtitles.srt'));
      const text = await response.text();
      const {captions: parsed} = parseSrt({input: text});
      setCaptions(parsed);
      continueRender(handle);
    } catch (e) {
      cancelRender(e);
    }
  }, [continueRender, cancelRender, handle]);

  useEffect(() => {
    fetchCaptions();
  }, [fetchCaptions]);

  if (!captions) {
    return null;
  }

  return <AbsoluteFill>{/* Use captions here */}</AbsoluteFill>;
};

• What it demonstrates: Usage pattern for Importing .srt subtitles into Remotion from the official docs.

Key Takeaways

1. Understand reading an .srt file when working with Importing .srt subtitles into Remotion.
2. Understand using imported captions when working with Importing .srt subtitles into Remotion.
3. Understand see also when working with Importing .srt subtitles into Remotion.

Connects To

• api: related page in the Captions (@remotion/captions) section.
• Caption: related page in the Captions (@remotion/captions) section.
• Create Tiktok Style Captions: related page in the Captions (@remotion/captions) section.