Chapter 242: Playing videos in sequence

Core Idea

To play multiple videos one after another:

Key Concepts

• Create the video series
• Calculate the durations
• Register the composition
• Browser autoplay policies
• See also

Code Examples

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

export type VideosInSequenceProps = {
  videos: VideoToEmbed[];
};

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

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

        return (
          <Series.Sequence
            key={video.src}
            durationInFrames={video.durationInFrames}
            premountFor={fps}
          >
            <Video src={video.src} />
          </Series.Sequence>
        );
      })}
    </Series>
  );
};

• What it demonstrates: Usage pattern for Playing videos in sequence from the official docs.

Key Takeaways

1. Understand create the video series when working with Playing videos in sequence.
2. Understand calculate the durations when working with Playing videos in sequence.
3. Understand register the composition when working with Playing videos in sequence.
4. Understand browser autoplay policies when working with Playing videos in sequence.
5. Understand see also when working with Playing videos in sequence.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.