Skip to main content

createTikTok风格的字幕()v4.0.216

🌐 createTikTokStyleCaptions()v4.0.216

使用此功能，你可以分割标记以创建字幕的“页面”，这在 TikTok 视频中很常见。

🌐 Using this function, you can segment tokens to create "pages" of captions, as commonly seen on TikTok videos.

你可以指定页面切换的频率。combineTokensWithinMilliseconds 的值越高，每页能容纳的单词越多，而值越低，则会出现逐词动画。

🌐 You may specify how often pages switch. A high value for combineTokensWithinMilliseconds will fit many words on 1 page, while a low value will lead to word-by-word animation.

此功能可安全用于浏览器、Node.js 和 Bun。

🌐 This function is safe to use in the browser, Node.js and Bun.

note

此 API 期望在 text 字段中 每个单词前都包含空格。空格用作分隔符，省略空格将导致整个文本合并为单行或单页，从而导致字幕格式不佳。

Create pages from captions
import {createTikTokStyleCaptions, Caption} from '@remotion/captions';

const captions: Caption[] = [
  {
    text: 'Using',
    startMs: 40,
    endMs: 300,
    timestampMs: 200,
    confidence: null,
  },
  {
    text: " Remotion's",
    startMs: 300,
    endMs: 900,
    timestampMs: 440,
    confidence: null,
  },
  {
    text: ' TikTok',
    startMs: 900,
    endMs: 1260,
    timestampMs: 1080,
    confidence: null,
  },
  {
    text: ' template,',
    startMs: 1260,
    endMs: 1950,
    timestampMs: 1600,
    confidence: null,
  },
];

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

/* pages: [
  {
    text: "Using Remotion's",
    startMs: 40,
    durationMs: 860,
    tokens: [
      {
        text: 'Using',
        fromMs: 40,
        toMs: 300,
      },
      {
        text: " Remotion's",
        fromMs: 300,
        toMs: 900,
      },
    ],
  },
  {
    text: 'TikTok template,',
    startMs: 900,
    durationMs: 1050,
    tokens: [
      {
        text: 'TikTok',
        fromMs: 900,
        toMs: 1260,
      },
      {
        text: ' template,',
        fromMs: 1260,
        toMs: 1950,
      },
    ],
  }
] */

应用编程接口​

🌐 API

captions​

一个 Caption 对象的数组。

🌐 An array of Caption objects.

combineTokensWithinMilliseconds​

比此值更接近的单词将被合并到同一页中。

🌐 Words that are closer than this value will be combined into a single page.

返回值​

🌐 Return value

一个具有以下属性的对象：

🌐 An object with the following properties:

pages​

一个 TikTokPage 对象的数组。

🌐 An array of TikTokPage objects.

一页包括：

🌐 A page consists of:

  • text：页面的文本。
  • startMs：页面的开始时间（毫秒）。
  • durationMs：页面的持续时间，以毫秒为单位（从 v4.0.261 开始）。
  • tokens：一个对象数组，如果你想逐词动画的话：
    • text：令牌的文本。
    • fromMs：该标记的绝对开始时间，以毫秒为单位。
    • toMs：令牌的绝对结束时间，单位为毫秒。

空白符敏感​

🌐 Whitespace sensitivity

text 字段对空格敏感。你应该在其中包含空格，最好在每个单词前都加上空格。

🌐 The text field is whitespace sensitive. You should include spaces in it, ideally before each word.

在渲染时，将 white-space: pre CSS 属性应用于标题的容器，以确保空格被保留。

🌐 While rendering, apply the white-space: pre CSS property to the container of the caption to ensure that the spaces are preserved.

另请参阅​

🌐 See also

Last updated on