Chapter 269: renderMediaOnWeb()

Core Idea

_Part of the @remotion/web-renderer package.

Key Concepts

• Arguments
• composition
• inputProps?
• container?
• videoCodec?
• frameRange?
• scale?
• onProgress?

Code Examples

const Component: React.FC = () => {
  return <Video src="https://remotion.media/video.mp4" />;
};

const {getBlob} = await renderMediaOnWeb({
  composition: {
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 1920,
    height: 1080,
    id: 'my-composition',
  },
});

const blob = await getBlob();

• What it demonstrates: Usage pattern for renderMediaOnWeb() from the official docs.

Key Takeaways

1. Understand arguments when working with renderMediaOnWeb().
2. Understand composition when working with renderMediaOnWeb().
3. Understand inputprops? when working with renderMediaOnWeb().
4. Understand container? when working with renderMediaOnWeb().
5. Understand videocodec? when working with renderMediaOnWeb().

Connects To

• Angular: related page in the Framework & Renderer Integrations section.
• Figma: related page in the Framework & Renderer Integrations section.
• use Gsap Timeline: related page in the Framework & Renderer Integrations section.