Chapter 340: Media Key Behavior (Web MediaSession API)

Core Idea

This document is about the behavior when a user:

Key Concepts

• Modes
• prevent-media-session (default)
• register-media-session
• do-nothing
• When using multiple <Player>'s
• In the Remotion Studio

Code Examples

const otherProps = {
  compositionHeight: 720,
  compositionWidth: 1280,
  inputProps: {},
  durationInFrames: 120,
  fps: 30,
  component: () => null,
};

export const MyComp: React.FC = () => {
  return (
    <Player
      browserMediaControlsBehavior={{
        mode: 'prevent-media-session',
      }}
      {...otherProps}
    />
  );
};

• What it demonstrates: Usage pattern for Media Key Behavior (Web MediaSession API) from the official docs.

Key Takeaways

1. Understand modes when working with Media Key Behavior (Web MediaSession API).
2. Understand prevent-media-session (default) when working with Media Key Behavior (Web MediaSession API).
3. Understand register-media-session when working with Media Key Behavior (Web MediaSession API).
4. Understand do-nothing when working with Media Key Behavior (Web MediaSession API).
5. Understand when using multiple <player>'s when working with Media Key Behavior (Web MediaSession API).

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.