ContextQMD
Back to Remotion

Exporting subtitles

packages/docs/docs/captions/exporting.mdx

4.0.4612.7 KB
Original Source

Exporting subtitles

This guide covers different ways to export subtitles from your Remotion video.

Burned-in subtitles

If you want the subtitles to be part of the video itself (burned in), follow the instructions in Displaying captions to render the captions, then simply render the video as usual.

bash
npx remotion render

Exporting as a separate .srt file

To export subtitles as a separate .srt file, use the <Artifact> component together with serializeSrt().

tsx
import {Artifact, useCurrentFrame} from 'remotion';
import {serializeSrt} from '@remotion/captions';
import type {Caption} from '@remotion/captions';

const captions: Caption[] = [
  {
    text: 'Hello ',
    startMs: 0,
    endMs: 500,
    timestampMs: 250,
    confidence: 1,
  },
  {
    text: 'world!',
    startMs: 500,
    endMs: 1000,
    timestampMs: 750,
    confidence: 1,
  },
];

// ---cut---

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  // Convert captions to SRT format
  // Each caption becomes its own line
  const srtContent = serializeSrt({
    lines: captions.map((caption) => [caption]),
  });

  return (
    <>
      {frame === 0 ? <Artifact filename="subtitles.srt" content={srtContent} /> : null}
    </>
  );
};

The artifact will be saved to out/[composition-id]/subtitles.srt when rendering.

Grouping words into lines

If your captions are word-by-word, you may want to group multiple words into a single subtitle line. You can use createTikTokStyleCaptions() to create pages, then convert them back to the format expected by serializeSrt():

tsx
import {serializeSrt, createTikTokStyleCaptions} from '@remotion/captions';
import type {Caption} from '@remotion/captions';

const captions: Caption[] = [];

// ---cut---

const {pages} = createTikTokStyleCaptions({
  captions,
  combineTokensWithinMilliseconds: 3000,
});

const srtContent = serializeSrt({
  lines: pages.map((page) => {
    // Convert page tokens back to Caption format
    return page.tokens.map((token) => ({
      text: token.text,
      startMs: token.fromMs,
      endMs: token.toMs,
      timestampMs: (token.fromMs + token.toMs) / 2,
      confidence: null,
    }));
  }),
});

See also