React Native video player

The React Native SDK includes a Cloudinary native video player component. This makes it easy to use the various Cloudinary video capabilities and deliver your videos using the device's native player. For Android, the player uses ExoPlayer and for iOS it uses AVPlayer.

On this page:

• Transformations

Rate this page:

To create a player, use the AdvancedVideo component and provide a Cloudinary video object or the full Cloudinary URL. You also need to define a height and width for the video player to display correctly:

const myVideo = cld.video('skate');

//In your view

<AdvancedVideo
  cldVideo={myVideo}
  videoStyle={{width: 300, height: 200}}
/>

or

<AdvancedVideo
  videoUrl='https://res.cloudinary.com/demo/video/upload/glide-over-coastal-beach.mp4'
  videoStyle={{width: 300, height: 200}}
/>

Transformations

You can include video transformations when creating your video instance, for example:

const myVideo = cld.video('sea_turtle.m3u8').transcode(streamingProfile("auto"));

<AdvancedVideo
  cldVideo={myVideo}
  videoStyle={{width: 300, height: 200}}
/>