Functions & Hooks

useVideo

function useVideo(source: string | number, options?: VideoOptions): Video;

Play a video into a native image handle.

const { currentFrame, size } = useVideo(require('./clip.mp4'), { looping: true })
// ...
<TgfxImage image={currentFrame} x={0} y={0} width={size.width} height={size.height} />

Decoding is the platform's - AVPlayer on iOS, MediaPlayer on Android - so audio, seeking and looping come from the player rather than from this package, and every frame reaches the GPU as the texture or buffer it decoded into. A frame never enters JS in any form: it lands in a native registry entry whose id never changes, so a new frame costs no React render and no scene re-commit, and it schedules a redraw on its own.

Frames are pulled on the UI thread, so a busy JS thread does not stall playback. That is what needs react-native-reanimated here.

The player, and the frame it owns, are released when source changes or the component unmounts - a device has only a handful of hardware decoders.

Parameters

source

string | number

options?

VideoOptions

Returns

Video

Remarks

Android decodes into a SurfaceTexture rather than a hardware buffer: a video decoder there hands back vendor-private buffer formats tgfx cannot import.

On this page