Skip to main content

预挂载v4.0.140

Remotion 只会渲染当前帧。
这意味着当视频或其他资产即将出现时,默认情况下不会加载它们。


尽管视频即将出现,但由于 Remotion 只会渲染当前时间,所以尚未加载。

什么是预挂载?

预挂载是提前挂载包含资产的组件的做法,以便在它们出现之前给予资产一些加载时间。


视频被提前挂载,以便给予加载一些时间。


它带有样式 opacity: 0 使其不可见。


useCurrentFrame()

定义的时间被冻结在 0

预加载 <Sequence>

使用预挂载时要谨慎,因为挂载更多元素会减慢页面速度。
<Sequence> 组件中添加 premountFor 属性以启用预挂载。

传递的数字是您为组件预挂载的帧数。

Premounted.tsx
tsx
const MyComp: React.FC = () => {
return (
<Sequence premountFor={100}>
<Video src={staticFile("bigbuckbunny.mp4")}></Video>
</Sequence>
);
};
Premounted.tsx
tsx
const MyComp: React.FC = () => {
return (
<Sequence premountFor={100}>
<Video src={staticFile("bigbuckbunny.mp4")}></Video>
</Sequence>
);
};

Remotion Studio 中,预挂载的组件以斜线条表示:



预挂载的 <Sequence> 具有样式 opacity: 0pointer-events: none

不可能对具有 layout="none"<Sequence> 进行预挂载,因为这样的序列没有容器来应用样式。

使用 <Series><TransitionSeries>

premountFor 也适用于 <Series.Sequence><TransitionSeries.Sequence>
目前还无法对整个 <Series><TransitionSeries> 进行预挂载。

自定义预挂载组件

您也可以使用公共 Remotion API 自行实现预挂载。
像使用 <Sequence> 一样使用以下组件:

PremountedSequence.tsx
tsx
import React, { forwardRef, useMemo } from "react";
import {
Freeze,
getRemotionEnvironment,
Sequence,
SequenceProps,
useCurrentFrame,
} from "remotion";
 
export type PremountedSequenceProps = SequenceProps & {
premountFor: number;
};
 
const PremountedSequenceRefForwardingFunction: React.ForwardRefRenderFunction<
HTMLDivElement,
{
premountFor: number;
} & SequenceProps
> = ({ premountFor, ...props }, ref) => {
const frame = useCurrentFrame();
 
if (props.layout === "none") {
throw new Error('`<Premount>` does not support layout="none"');
}
 
const { style: passedStyle, from = 0, ...otherProps } = props;
const active =
frame < from &&
frame >= from - premountFor &&
!getRemotionEnvironment().isRendering;
 
const style: React.CSSProperties = useMemo(() => {
return {
...passedStyle,
opacity: active ? 0 : 1,
// @ts-expect-error Only in the docs - it will not give a type error in a Remotion project
pointerEvents: active ? "none" : passedStyle?.pointerEvents ?? "auto",
};
}, [active, passedStyle]);
 
return (
<Freeze frame={from} active={active}>
<Sequence
ref={ref}
name={`<PremountedSequence premountFor={${premountFor}}>`}
from={from}
style={style}
{...otherProps}
/>
</Freeze>
);
};
 
export const PremountedSequence = forwardRef(
PremountedSequenceRefForwardingFunction,
);
PremountedSequence.tsx
tsx
import React, { forwardRef, useMemo } from "react";
import {
Freeze,
getRemotionEnvironment,
Sequence,
SequenceProps,
useCurrentFrame,
} from "remotion";
 
export type PremountedSequenceProps = SequenceProps & {
premountFor: number;
};
 
const PremountedSequenceRefForwardingFunction: React.ForwardRefRenderFunction<
HTMLDivElement,
{
premountFor: number;
} & SequenceProps
> = ({ premountFor, ...props }, ref) => {
const frame = useCurrentFrame();
 
if (props.layout === "none") {
throw new Error('`<Premount>` does not support layout="none"');
}
 
const { style: passedStyle, from = 0, ...otherProps } = props;
const active =
frame < from &&
frame >= from - premountFor &&
!getRemotionEnvironment().isRendering;
 
const style: React.CSSProperties = useMemo(() => {
return {
...passedStyle,
opacity: active ? 0 : 1,
// @ts-expect-error Only in the docs - it will not give a type error in a Remotion project
pointerEvents: active ? "none" : passedStyle?.pointerEvents ?? "auto",
};
}, [active, passedStyle]);
 
return (
<Freeze frame={from} active={active}>
<Sequence
ref={ref}
name={`<PremountedSequence premountFor={${premountFor}}>`}
from={from}
style={style}
{...otherProps}
/>
</Freeze>
);
};
 
export const PremountedSequence = forwardRef(
PremountedSequenceRefForwardingFunction,
);
note

这个自定义组件的一个注意事项:在预挂载序列中,仍然可能触发本机缓冲状态。
您的任务是在预挂载序列中禁用触发本机缓冲状态(例如将 pauseWhenBuffering 设置为 false)。
例如,您可以通过使用 React 上下文来实现这一点。

与缓冲状态一起使用

如果您还使用了缓冲状态<Audio><Video><OffthreadVideo><Img> 标签会意识到预挂载,并且在预挂载的 <Sequence> 中不会触发缓冲状态。

否则,这可能会导致在场景尚未可见时暂停播放。

另请参阅