React native cloudinary ready video player for hls , android and ios

[hamdij0maa]

React native cloudinary ready video player for hls , android and ios
that will be amazing

[tommyg-cld]

@hamdij0maa Building a video player for our React Native SDK is in our pipeline but there is no ETA for it.

Since our video player is based on video.js we cant use it in React Native and React Native does not have a built-in video player, which means you'll have to use a third-party video player such as:

• https://www.npmjs.com/package/react-native-video-player
• https://www.npmjs.com/package/expo-video-player

Here is a sample Cloudinary integration with a video at the moment in React Native:

import { SafeAreaView } from 'react-native';
import VideoPlayer from "expo-video-player";
import { CloudinaryVideo } from "@cloudinary/url-gen";
import { URLConfig } from "@cloudinary/url-gen";
import { CloudConfig } from "@cloudinary/url-gen";
import 'react-native-url-polyfill/auto';

// Set the Cloud configuration and URL configuration
let cloudConfig = new CloudConfig({ cloudName: 'demo' });
let urlConfig = new URLConfig({ secure: true });

export default function App() {

    // Instantiate and configure a CloudinaryVideo object.
    let myVideo = new CloudinaryVideo('dog', cloudConfig, urlConfig);

    // Render the image in a React component.
    return (
        <SafeAreaView>
            <VideoPlayer
                videoProps={{
                    source: { uri: myVideo.toURL() },
                }}
                style={{ width: 300, height: 200 }}
            />
        </SafeAreaView>
    )
};

You can also use Cloudinary video player with webview but you may have issues with this, here is a sample:

<WebView
   source={{uri: 'https://player.cloudinary.com/embed/?public_id=cld-imagine&cloud_name=demo&source[sourceTypes][0]=hls&source[transformation][streaming_profile]=auto'}}
   style={{marginTop: 20}}
/>

[hamdij0maa]

this is good for simple use cases, but for a list of videos, this will not work smoothly at all.
I am talking about an optimized video player for hls with caching ..

[dannyv-cloudinary]

Hi Hamdi.

As mentioned by my colleague, we do have something in the works, but I'm afraid we don't have a timeline that we're able to provide at this stage. In the meantime, I would recommend trying Tommy G's workaround above, and keep an eye on our documentation pages over the coming months for an update regarding a video player for React Native.

[hamdij0maa]

sure, looking forward, thanks.
it will be amazing, if you need alpha/beta tester let me know i'll be glad to help