<缩略图>

从 v3.2.41 开始可用

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

MyApp.tsx
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",
      }}
    />
  );
};

MyApp.tsx
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`

直接传入一个 React 组件或传入一个返回动态导入的函数。同时传入或不传入这两个 props 都会导致错误。

如果使用 lazyComponent，请将其包装在 useCallback() 中，以避免不断渲染。查看这里以获取示例。

note

缩略图不使用 <Composition>。直接传入您的组件，不要将其包装在 <Composition> 组件中。

`frameToDisplay`

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

`compositionWidth`

当作为 MP4 渲染时，您希望视频具有的宽度。使用 style={{width: <width>}} 来定义浏览器中假定的宽度。

note

示例：如果要渲染全高清视频，请将 compositionWidth 设置为 1920，compositionHeight 设置为 1080。默认情况下，缩略图也会假定这些尺寸。要使其变小，请传递一个 style 属性，为缩略图指定不同的宽度：{"style={{width: 400}}"}。查看播放器缩放以了解更多信息。

`compositionHeight`

画布的高度（以像素为单位）。当作为 MP4 渲染时，您希望视频具有的高度。使用 style={{height: <height>}} 来定义浏览器中假定的高度。

`durationInFrames`

视频的帧数。必须是大于 0 的整数。

note

这个 prop 对于缩略图组件是必需的，因为您的组件可能根据 useVideoConfig() 返回的内容而呈现不同。

`fps`

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

note

这个属性对于缩略图组件是必需的，因为您的组件可能根据useVideoConfig()返回的内容而呈现不同。

`errorFallback`

可选的

用于渲染自定义错误消息的回调函数。请参阅处理错误部分以查看示例。

`renderLoading`

可选的

一个回调函数，允许您返回一个自定义 UI，在缩略图加载时显示。

回调函数的第一个参数包含缩略图的height和width，因为它被渲染。

tsx
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}
    />
  );
};

tsx
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`

可选的

将props传递给您使用component属性指定的组件。Typescript定义采用您给component传递的props的形状。默认为undefined。

`style`

可选的

用于HTMLDivElement的常规style属性。如果您希望缩略图具有不同的尺寸，则可以传递不同的高度和宽度。

`className`v3.1.3

可选的

要应用于容器的HTML类名。

`overflowVisible`v4.0.173

使播放器在画布外呈现内容。如果视频中有可拖动元素等交互元素，则此选项很有用。

ThumbnailRef

您可以附加一个ref到缩略图，并获取一些布局信息。

tsx
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.
    />
  );
};

tsx
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.
    />
  );
};

以下方法可在缩略图ref上使用：

`getContainerNode()`

获取缩略图的容器HTMLDivElement。如果您想要手动将侦听器附加到缩略图元素，则此方法很有用。

tsx
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);
  };
}, []);

tsx
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。

`addEventListener()`

开始监听事件。请查看Events部分以查看函数签名和可用事件。

`removeEventListener()`

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

事件

使用缩略图引用，您可以绑定事件监听器以获取有关缩略图的特定事件的通知。

tsx
const thumbnailRef = useRef<ThumbnailRef>(null);
 
useEffect(() => {
  if (!thumbnailRef.current) {
    return;
  }
 
  thumbnailRef.current.addEventListener("error", (e) => {
    console.log("error", e.detail.error);
  });
}, []);

tsx
const thumbnailRef = useRef<ThumbnailRef>(null);
 
useEffect(() => {
  if (!thumbnailRef.current) {
    return;
  }
 
  thumbnailRef.current.addEventListener("error", (e) => {
    console.log("error", e.detail.error);
  });
}, []);

`error`

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

您可以通过读取e.detail.error值来获取错误：

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

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

`waiting`v4.0.125

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

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

`resume`v4.0.125

当播放器退出本机缓冲状态时触发。

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

处理错误

查看：<Player> -> 处理错误

另请参阅

CONTRIBUTORS

Slashgear

Implementation

API​

component 或 lazyComponent​

frameToDisplay​

compositionWidth​

compositionHeight​

durationInFrames​

fps​

errorFallback​

renderLoading​

inputProps​

style​

classNamev3.1.3​

overflowVisiblev4.0.173​

ThumbnailRef​

getContainerNode()​

getScale()​

addEventListener()​

removeEventListener()​

事件​

error​

waitingv4.0.125​

resumev4.0.125​

处理错误​

另请参阅​

API

`component` 或 `lazyComponent`

`frameToDisplay`

`compositionWidth`

`compositionHeight`

`durationInFrames`

`fps`

`errorFallback`

`renderLoading`

`inputProps`

`style`

`className`v3.1.3

`overflowVisible`v4.0.173

ThumbnailRef

`getContainerNode()`

`getScale()`

`addEventListener()`

`removeEventListener()`

事件

`error`

`waiting`v4.0.125

`resume`v4.0.125

处理错误

另请参阅