按顺序播放视频

如果你想连续播放多个视频，你可以：

🌐 If you would like to play multiple videos in sequence, you can:

定义一个渲染<Series>的<OffthreadVideo>组件的组件。

创建一个calculateMetadata()函数，用于获取每个视频的时长。

注册一个<Composition>，该组件指定一个视频列表。

基本示例

🌐 Basic example

首先创建一个组件，使用 <Series> 和 <OffthreadVideo> 组件来渲染视频列表：

🌐 Start off by creating a component that renders a list of videos using the <Series> and <OffthreadVideo> component:

VideosInSequence.tsx
import React from 'react';
import {OffthreadVideo, Series} from 'remotion';

type VideoToEmbed = {
  src: string;
  durationInFrames: number | null;
};

type Props = {
  videos: VideoToEmbed[];
};

export const VideosInSequence: React.FC<Props> = ({videos}) => {
  return (
    <Series>
      {videos.map((vid) => {
        if (vid.durationInFrames === null) {
          throw new Error('Could not get video duration');
        }

        return (
          <Series.Sequence key={vid.src} durationInFrames={vid.durationInFrames}>
            <OffthreadVideo src={vid.src} />
          </Series.Sequence>
        );
      })}
    </Series>
  );
};

在同一个文件中，创建一个函数来计算作品的元数据：

🌐 In the same file, create a function that calculates the metadata for the composition:

调用 parseMedia() 获取每个视频的时长。

创建一个 calculateMetadata() 函数来获取每个视频的时长。

将所有时长相加以获得作品的总时长。

VideosInSequence.tsx
export const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
  const fps = 30;
  const videos = await Promise.all([
    ...props.videos.map(async (video): Promise<VideoToEmbed> => {
      const {slowDurationInSeconds} = await parseMedia({
        src: video.src,
        fields: {
          slowDurationInSeconds: true,
        },
      });

      return {
        durationInFrames: Math.floor(slowDurationInSeconds * fps),
        src: video.src,
      };
    }),
  ]);

  const totalDurationInFrames = videos.reduce((acc, video) => acc + (video.durationInFrames ?? 0), 0);

  return {
    props: {
      ...props,
      videos,
    },
    fps,
    durationInFrames: totalDurationInFrames,
  };
};

在你的根文件中，创建一个 <Composition>，使用 VideosInSequence 组件和导出的 calculateMetadata 函数：

🌐 In your root file, create a <Composition> that uses the VideosInSequence component and the exported calculateMetadata function:

Root.tsx

import React from 'react';
import {Composition, staticFile} from 'remotion';
import {VideosInSequence, calculateMetadata} from './VideosInSequence';

export const Root: React.FC = () => {
  return (
    <Composition
      id="VideosInSequence"
      component={VideosInSequence}
      width={1920}
      height={1080}
      defaultProps={{
        videos: [
          {
            durationInFrames: null,
            src: 'https://remotion.media/BigBuckBunny.mp4',
          },
          {
            durationInFrames: null,
            src: staticFile('localvideo.mp4'),
          },
        ],
      }}
      calculateMetadata={calculateMetadata}
    />
  );
};

添加预安装

🌐 Adding premounting

如果你只关心渲染后视频看起来流畅，你可以跳过这一步。如果你也想在播放器中预览播放时流畅，请考虑以下事项：

🌐 If you only care about the video looking smooth when rendered, you may skip this step.
If you also want smooth preview playback in the Player, consider this:

视频只有在即将播放时才会加载。
为了创建更流畅的预览播放，我们应该对所有视频做两件事：

🌐 A video will only load when it is about to be played.
To create a smoother preview playback, we should do two things to all videos:

向 <Series.Sequence> 添加 premountFor 属性。这将在视频播放前隐形挂载视频标签，为其提供一些加载时间。

添加 pauseWhenBuffering 属性。如果视频仍需加载，这将使播放器进入缓冲状态。

VideosInSequence.tsx
export const VideosInSequence: React.FC<Props> = ({videos}) => {
  const {fps} = useVideoConfig();

  return (
    <Series>
      {videos.map((vid) => {
        if (vid.durationInFrames === null) {
          throw new Error('Could not get video duration');
        }

        return (
          <Series.Sequence key={vid.src} premountFor={4 * fps} durationInFrames={vid.durationInFrames}>
            <OffthreadVideo pauseWhenBuffering src={vid.src} />
          </Series.Sequence>
        );
      })}
    </Series>
  );
};

浏览器自动播放策略

🌐 Browser autoplay policies

移动浏览器在阻止在创作开始后进入的自动播放视频方面更加积极。

🌐 Mobile browsers are more aggressive in blocking autoplaying videos that enter after the start of the composition.

如果你想确保所有视频的播放体验顺畅，也请阅读有关浏览器自动播放行为的说明，并在需要时自定义该行为。

🌐 If you want to ensure a smooth playback experience for all videos, also read the notes about browser autoplay behavior and customize the behavior if needed.

另请参阅

🌐 See also

基本示例​

添加预安装​

浏览器自动播放策略​

另请参阅​

基本示例

添加预安装

浏览器自动播放策略

另请参阅