Getting a cloudinary video to play in a 3rd party video player

TornikeRogava
TornikeRogava Member Posts: 4
edited December 2023 in Developer APIs

I'm trying to get videos from our cloudinary library to play in a video player in a React Native Expo app. I can't find a link that would work in a 3rd party player and was wondering if that was even possible. If not, I would like to know if anyone has successfully set up the Cloudinary video player in an Expo app.

Thanks in advance!

Answers

  • atdatu
    atdatu Member, Cloudinary Staff Posts: 9

    Hi @TornikeRogava ,

    Thank you for reaching out! At the moment, we don't have a video component implemented to our React Native SDK. Looks like there is a 3rd party video player for React Native: https://github.com/react-native-video/react-native-video.

  • TornikeRogava
    TornikeRogava Member Posts: 4

    Hi, thanks for the reply, but that wasn't my questions. Where can I get links for my cloudinary videos that can be played in a 3rd party player?

  • Cloudinary_John_H
    Cloudinary_John_H Member, Cloudinary Staff Posts: 21

    Hi @TornikeRogava ,

    Thank you for helping to clarify.

    If the asset has already been uploaded to your media library, the URL can be selected for an individual asset by hovering over an asset and clicking the "<>" icon for "Copy Link"

    If you would like to get the URL for several videos at once, that can be done by:

    1. You can enable an app called "Export asset metadata" from the App marketplace tab, see this gif for demo. Please note that this app has a limit of 1000 assets


    You will end up with a URL per asset, like so:

    https://john.cloudinary.us/video/upload/v1693626866/petra.mov

    With this URL, you can apply transformation parameters to modify the video, like so:

    https://john.cloudinary.us/video/upload/w_200/petra.mp4


    Hopefully that helps to clarify the situation, please let me know if anything is not clear, or you have further questions.


    Thanks,

    John

  • TornikeRogava
    TornikeRogava Member Posts: 4

    Hi, John,

    Thanks for the reply, it was very useful.

    I have one more question that you might be able to clear up. Is it possible (or rather, what would be the best way of going about this) to get the video progress tracking (how far along the video a certain user is) to work through the external URL extracted this way? also, is it possible to sync the progress with transformed versions of the URL (i.e. mp4 and mp3 versions)? Thanks!

  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 80

    Hey @TornikeRogava

    The implementation of a progress bar would be down to whatever library you use to implement a video player in React Native, rather than being something controlled on the Cloudinary side. This could be done by preloading the entire video into the player and determining the video duration length and progress from that, or alternatively, looking at the video metadata to find the duration from there.

    In either case though, this isn't something that we actively prevent, so you should be able to implement a progress bar using a Cloudinary video just as easily as a video from another storage provide such as Amazon S3.

    I hope this helps. Please let us know if you have any further questions.

  • TornikeRogava
    TornikeRogava Member Posts: 4

    I meant progress tracking as in saving the timestamp of a user's watch progress on the server for them to continue watching from that exact point later. What's the best way of implementing this for a clouidnary video?

  • Tom
    Tom Member, Cloudinary Staff Posts: 45

    Hi @TornikeRogava ,

    Thanks for replying.

    I'm afraid this would need to be implemented on the player's side and depending on what player you use I would recommend checking out their docs on how to add this function.

    For example, on our Video player, you can use these events https://cloudinary.com/documentation/video_player_api_reference#events.

    Please let me know if you have any other questions or queries.

    Kind Regards,

    Thomas