Chapter 292: Avoiding flickering in <Player>

Core Idea

Consider the following markup:

Key Concepts

• Strategies
• Option 1: Ignore
• Option 2: Pause the <Player /> when media is buffering
• Option 3: Premounting the video<AvailableFrom v="4.0.140"/>
• Option 4: Preloading to avoid network request
• Option 5: Prefetching as blob URL to more aggressively avoid network request
• Option 6: Prefetching as Base64 to avoid network request and local HTTP server
• See also

Code Examples

const MyComponent: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        from={0}
        durationInFrames={120}
        src="https://example.com/video1.mp4"
      />
      <Video
        from={120}
        durationInFrames={120}
        src="https://example.com/video2.mp4"
      />
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for Avoiding flickering in <Player> from the official docs.

Key Takeaways

1. Understand strategies when working with Avoiding flickering in <Player>.
2. Understand option 1: ignore when working with Avoiding flickering in <Player>.
3. Understand option 2: pause the <player /> when media is buffering when working with Avoiding flickering in <Player>.
4. Understand option 3: premounting the video<availablefrom v="4.0.140"/> when working with Avoiding flickering in <Player>.
5. Understand option 4: preloading to avoid network request when working with Avoiding flickering in <Player>.

Connects To

• Cors Issues: related page in the Troubleshooting & Errors section.
• Enametoolong: related page in the Troubleshooting & Errors section.
• Font Picker: related page in the Troubleshooting & Errors section.