将 .srt 字幕导入 Remotion

🌐 Importing .srt subtitles into Remotion

如果你有一个现有的 .srt 字幕文件，你可以使用 @remotion/captions 中的 parseSrt() 将其导入到 Remotion。

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

阅读 .srt 文件

🌐 Reading an .srt file

使用 staticFile() 来引用 public 文件夹中的 .srt 文件，然后获取并解析它：

🌐 Use staticFile() to reference an .srt file in your public folder, then fetch and parse it:

Importing captions from .srt
import {useState, useEffect, useCallback} from 'react';
import {AbsoluteFill, staticFile, useDelayRender} from 'remotion';
import {parseSrt} from '@remotion/captions';
import type {Caption} from '@remotion/captions';

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>;
};

或者，你也可以通过 URL fetch() 远程文件。

🌐 Alternatively, you can also fetch() a remote file via URL.

使用导入的字幕

🌐 Using imported captions

解析后，字幕将采用推荐的Caption格式，并可与所有@remotion/captions工具一起使用。

🌐 Once parsed, the captions are in the recommended Caption format and can be used with all @remotion/captions utilities.

可能的下一步：

🌐 Possible next steps:

• 显示字幕 - 在你的视频中呈现字幕
• 导出字幕 - 将字幕导出到文件

另请参阅

🌐 See also

• parseSrt() - API 参考
• 显示字幕 - 在你的视频中呈现字幕
• Caption - 字幕数据结构