search

cloudinary / cloudinary-react-native

MIT License
13 stars 6 forks source link

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

Open hamdij0maa opened 1 year ago

hamdij0maa commented 1 year ago

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

tommyg-cld commented 1 year ago

@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:

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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