Chapter 332: Combatting autoplay issues

Core Idea

Browsers place restrictions on websites that play audio without user interaction. Read on how to properly use the Remotion Player so you don't run into a browser policy.

Key Concepts

• Trigger the play from a user event
• Pass the event to the play() or toggle() method
• Media that enters the video after the start
• Using the numberOfSharedAudioTags prop
• Dealing with an autoplay failure<AvailableFrom v="4.0.187" />
• When will a browser restrict autoplay?

Code Examples

// @allowUmdGlobalAccess
// @filename: ./remotion/MyComp.tsx
export const MyComp = () => <></>;

// @filename: index.tsx

export const App: React.FC = () => {
  const ref = useRef<PlayerRef>(null);

  return (
    <button
      onClickCapture={(e) => {
        const {current} = ref;
        // Pass the event to .play() or .toggle()
        current?.play(e);
      }}
    >
      Play
    </button>
  );
};

• What it demonstrates: Usage pattern for Combatting autoplay issues from the official docs.

Key Takeaways

1. Understand trigger the play from a user event when working with Combatting autoplay issues.
2. Understand pass the event to the play() or toggle() method when working with Combatting autoplay issues.
3. Understand media that enters the video after the start when working with Combatting autoplay issues.
4. Understand using the numberofsharedaudiotags prop when working with Combatting autoplay issues.
5. Understand dealing with an autoplay failure<availablefrom v="4.0.187" /> when working with Combatting autoplay issues.

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.