Skip to main content

<Thumbnail>

v3.2.41

一个组件，可以在常规的 React 应用中渲染（例如：Next.JS、Vite.js、Create React App），用于显示视频的单个帧。

🌐 A component which can be rendered in a regular React App (for example: for example: Next.JS, Vite.js, Create React App) to display a single frame of a video.

MyApp.tsx
import {Thumbnail} from '@remotion/player';
import {MyVideo} from './remotion/MyVideo';

export const App: React.FC = () => {
  return (
    <Thumbnail
      component={MyVideo}
      compositionWidth={600}
      compositionHeight={600}
      frameToDisplay={30}
      durationInFrames={120}
      fps={30}
      inputProps={{
        title: 'Foo',
      }}
    />
  );
};

应用编程接口​

🌐 API

component 或 lazyComponent​

🌐 component or lazyComponent

直接传递一个 React 组件 或 传递一个返回动态导入的函数。两者都不传或者同时传递都是错误的。

🌐 Pass a React component in directly or pass a function that returns a dynamic import. Passing neither or both of the props is an error.

如果你使用 lazyComponent，请将其封装在 useCallback() 中以避免持续渲染。在这里查看示例。

🌐 If you use lazyComponent, wrap it in a useCallback() to avoid constant rendering. See here for an example.

note

缩略图不使用 <Composition> 的。直接传递你的组件，不要将其封装在 <Composition> 组件中。

frameToDisplay​

缩略图中由合成渲染的帧的索引。

🌐 Index of the frame rendered by the composition in the Thumbnail.

compositionWidth​

你希望视频在渲染为 MP4 时的宽度。使用 style={{width: <width>}} 来定义在浏览器中假定的宽度。

note

示例： 如果你想渲染全高清(FHD)视频，请将 compositionWidth 设置为 1920，并将 compositionHeight 设置为 1080。默认情况下，缩略图也将采用这些尺寸。 如果想让它更小，请传递 style 属性以给缩略图设置不同的宽度：{"style={{width: 400}}"}。请参阅 播放器缩放 了解更多信息。

compositionHeight​

画布的高度（以像素为单位）。 你希望视频在导出为 MP4 时的高度。使用 style={{height: <height>}} 来定义浏览器中应假定的高度。

durationInFrames​

视频的时长，以帧为单位。必须是整数且大于0。

🌐 The duration of the video in frames. Must be an integer and greater than 0.

note

这个属性对于 Thumbnail 组件是必需的，因为你的组件可能会根据 useVideoConfig() 返回的内容渲染不同。

fps​

视频的帧率。必须是一个数字。

🌐 The frame rate of the video. Must be a number.

note

这个属性对于 Thumbnail 组件是必需的，因为你的组件可能会根据 useVideoConfig() 返回的内容渲染不同。

errorFallback?​

用于渲染自定义错误消息的回调。有关示例，请参见处理错误部分。

🌐 A callback for rendering a custom error message. See Handling errors section for an example.

renderLoading?​

一个回调函数，允许你返回一个自定义的用户界面，该界面在缩略图加载时显示。

🌐 A callback function that allows you to return a custom UI that gets displayed while the thumbnail is loading.

回调函数的第一个参数包含缩略图在渲染时的 height 和 width。

🌐 The first parameter of the callback function contains the height and width of the thumbnail as it gets rendered.


const MyApp: React.FC = () => {
  // `RenderLoading` type can be imported from "@remotion/player"
  const renderLoading: RenderLoading = useCallback(({height, width}) => {
    return (
      <AbsoluteFill style={{backgroundColor: 'gray'}}>
        Loading thumbnail ({height}x{width})
      </AbsoluteFill>
    );
  }, []);

  return <Thumbnail fps={30} component={Component} durationInFrames={100} compositionWidth={1080} compositionHeight={1080} frameToDisplay={30} renderLoading={renderLoading} />;
};
info

如果缩略图包含使用 React Suspense 的元素，或者正在使用 lazyComponent 属性，则需要加载缩略图。

inputProps?​

通过 component 属性将属性传递给你指定的组件。Typescript 定义采用你给 component 的属性的形式。默认 undefined。

🌐 Pass props to the component that you have specified using the component prop. The Typescript definition takes the shape of the props that you have given to your component. Default undefined.

style?​

HTMLDivElement 的常规 style 属性。如果你希望缩略图的尺寸与原始组合尺寸不同，可以传递不同的高度和宽度。

🌐 A regular style prop for a HTMLDivElement. You can pass a different height and width if you would like different dimensions for the thumbnail than the original composition dimensions.

className?v3.1.3​

要应用于容器的 HTML 类名。

🌐 A HTML class name to be applied to the container.

overflowVisiblev4.0.173​

使播放器渲染画布外的内容。如果视频中有交互元素，例如可拖动的元素，这很有用。

🌐 Makes the Player render things outside of the canvas. Useful if you have interactive elements in the video such as draggable elements.

logLevel?v4.0.250​

One of trace, verbose, info, warn, error.
Determines how much info is being logged to the console.

Default info.

noSuspensev4.0.271​

禁用 React Suspense，这在编写测试时非常有用。

🌐 Disables React Suspense, which is useful for writing tests.

ThumbnailRef​

你可以将引用附加到缩略图并获取一些布局信息。

🌐 You may attach a ref to the thumbnail and get some layout info.

import {Thumbnail, ThumbnailRef} from '@remotion/player';
import {useEffect, useRef} from 'react';
import {MyComposition} from './MyComposition';

const MyComp: React.FC = () => {
  const thumbnailRef = useRef<ThumbnailRef>(null);

  useEffect(() => {
    if (thumbnailRef.current) {
      console.log(thumbnailRef.current.getScale());
    }
  }, []);

  return (
    <Thumbnail
      ref={thumbnailRef}
      durationInFrames={30}
      compositionWidth={1080}
      compositionHeight={1080}
      fps={30}
      frameToDisplay={30}
      component={MyComposition}
      // Many other optional props are available.
    />
  );
};

缩略图引用上可用以下方法：

🌐 The following methods are available on the thumbnail ref:

getContainerNode()​

获取缩略图的容器 HTMLDivElement。如果你想手动将监听器附加到缩略图元素上，这很有用。

🌐 Gets the container HTMLDivElement of the thumbnail. Useful if you'd like to manually attach listeners to the thumbnail element.

const thumbnailRef = useRef<ThumbnailRef>(null);

useEffect(() => {
  if (!thumbnailRef.current) {
    return;
  }
  const container = thumbnailRef.current.getContainerNode();
  if (!container) {
    return;
  }

  const onClick = () => {
    console.log('thumbnail got clicked');
  };

  container.addEventListener('click', onClick);
  return () => {
    container.removeEventListener('click', onClick);
  };
}, []);

getScale()​

返回一个数字，表示内容相比于自然组合尺寸缩小了多少。例如，如果组合是 1920x1080，但缩略图宽度为 960px，则此方法会返回 0.5。

🌐 Returns a number which says how much the content is scaled down compared to the natural composition size. For example, if the composition is 1920x1080, but the thumbnail is 960px in width, this method would return 0.5.

addEventListener()​

开始监听一个事件。请参阅 事件 部分以查看函数签名和可用的事件。

🌐 Start listening to an event. See the Events section to see the function signature and the available events.

removeEventListener()​

停止监听事件。请查看 Events 部分以查看函数签名和可用的事件。

🌐 Stop listening to an event. See the Events section to see the function signature and the available events.

事件​

🌐 Events

使用 thumbnail ref，你可以绑定事件监听器，以便在缩略图发生某些事件时收到通知。

🌐 Using a thumbnail ref, you can bind event listeners to get notified of certain events of the thumbnail.

const thumbnailRef = useRef<ThumbnailRef>(null);

useEffect(() => {
  if (!thumbnailRef.current) {
    return;
  }

  thumbnailRef.current.addEventListener('error', (e) => {
    console.log('error', e.detail.error);
  });
}, []);

error​

当缩略图发生错误或未捕获的异常时触发。

🌐 Fires when an error or uncaught exception has happened in the thumbnail.

你可能会在读取 e.detail.error 值时遇到错误：

🌐 You may get the error by reading the e.detail.error value:

ref.current?.addEventListener('error', (e) => {
  console.log('error ', e.detail.error); // error [Error: undefined is not a function]
});

waitingv4.0.125​

当播放器进入 本地缓冲状态 时触发。

🌐 Fires when the Player has entered into the native buffering state.

在这里阅读如何最佳实现状态管理。

🌐 Read here how to best implement state management.

resumev4.0.125​

当播放器退出native buffering state时触发。

🌐 Fires when the Player has exited the native buffering state.

在这里阅读如何最佳实现状态管理。

🌐 Read here how to best implement state management.

处理错误​

🌐 Handling errors

参见：<Player> -> 错误处理

🌐 See: <Player> -> Handling errors

另请参阅​

🌐 See also

Last updated on