@remotion/player
Version:
React component for embedding a Remotion preview into your app
57 lines (56 loc) • 2.4 kB
TypeScript
import type { ComponentType } from 'react';
import React from 'react';
import type { CompProps } from 'remotion';
import type { AnyZodObject } from 'zod';
import type { PlayerRef } from './player-methods.js';
import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
import type { PosterFillMode, RenderLoading, RenderPoster } from './PlayerUI.js';
import type { PropsIfHasProps } from './utils/props-if-has-props.js';
export type ErrorFallback = (info: {
error: Error;
}) => React.ReactNode;
export type PlayerProps<Schema extends AnyZodObject, Props> = {
durationInFrames: number;
compositionWidth: number;
compositionHeight: number;
fps: number;
showVolumeControls?: boolean;
controls?: boolean;
errorFallback?: ErrorFallback;
style?: React.CSSProperties;
loop?: boolean;
autoPlay?: boolean;
allowFullscreen?: boolean;
clickToPlay?: boolean;
doubleClickToFullscreen?: boolean;
spaceKeyToPlayOrPause?: boolean;
numberOfSharedAudioTags?: number;
playbackRate?: number;
renderLoading?: RenderLoading;
moveToBeginningWhenEnded?: boolean;
className?: string;
initialFrame?: number;
renderPoster?: RenderPoster;
showPosterWhenPaused?: boolean;
showPosterWhenEnded?: boolean;
showPosterWhenUnplayed?: boolean;
showPosterWhenBuffering?: boolean;
inFrame?: number | null;
outFrame?: number | null;
initiallyShowControls?: number | boolean;
renderPlayPauseButton?: RenderPlayPauseButton;
renderFullscreenButton?: RenderFullscreenButton;
alwaysShowControls?: boolean;
schema?: Schema;
initiallyMuted?: boolean;
showPlaybackRateControl?: boolean | number[];
posterFillMode?: PosterFillMode;
bufferStateDelayInMilliseconds?: number;
hideControlsWhenPointerDoesntMove?: boolean | number;
} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
/**
* @description A component which can be rendered in a regular React App (for example: Vite, Next.js) to display a Remotion video.
* @see [Documentation](https://www.remotion.dev/docs/player/player)
*/
export declare const Player: <Schema extends AnyZodObject, Props>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;