Skip to main content

Playback issues in the <Player>

Read this page if you encounter issues with media playback in the Player such as:

  • Black frames inbetween scenes
  • Audio choppiness
  • Unexpected pausing
  • Jumping around

Ensure best practices​

1
Add pauseWhenBuffering to <Audio>, <Video>, <OffthreadVideo> and <Img> components.
2
For seamless transitions, use the premountFor prop for <Sequence>'s.
3
Don't use prefetch() if the Player is already mounted.
4
Avoid over-aggressive prefetch()-ing and premounting - it will use up resources faster.

Enable loggingv4.0.250​

You can observe mounting, loading, seeking and buffering events of media by adding logLevel="trace" to the <Player> component.

Adding logLevel="trace" to the Player
tsx
import React from 'react';
import {Player} from '@remotion/player';
 
export const MyApp: React.FC = () => {
  return <Player {...otherProps} logLevel="trace" />;
};
note

Don't enable this prop for production as it may lead to slowdown.

To observe prefetching events, add logLevel: "trace" to your prefetch() calls, if there are any:

Adding logLevel: "trace" to prefetch()
tsx
import {prefetch} from 'remotion';
 
prefetch(src, {
  logLevel: 'trace',
});

Reporting issues​

We have implemented exact logging of relevant events so in order to improve how Remotion handles media playback.
We are encouraging you to file feedback. If you would like to report feedback, please:

1
Ensure you are at least on v4.0.250 of Remotion.

enable logging and send all logs during playback alongside your report.

See also​