CODEWITHSUNDEEP
video-streamingvimeoreact-nativevimeo-api
Rafik
Rafik

Reputation: 455

Vimeo Videos in React Native

I'm developing a TV-Shows React-Native App and I'm hosting my videos in Vimeo, so I'm able to get only Vimeo URLs for my videos. I'm using react-native-video as a video player but it doesn't display videos for those links, On the other hand I tried with VJS URLs and it works.

I'll be thankful for any ideas.

Upvotes: 1

Views: 2664

Answers (1)

kockburn
kockburn

Reputation: 17626

I'll be assuming a few things, let me know if I get anything wrong.

If you're attempting to play videos on a native video player then you'll need to use a direct video player link. These links can be found via the vimeo interface when you click on a Video's settings -> Video File

  1. High Def 1080p (mp4, 1920x1080)
  2. High Def (mp4, 1280x720)
  3. Standard Def (mp4, 960x540)
  4. Standard Def (mp4, 640x360)
  5. HTTP Live Streaming (learn more)

These links are also provided in the JSON response when you get information regarding a specific video with this API:

GET https://api.vimeo.com/videos/{video_id}

They are located here under "files" in the response.

{
    //More data here
    "files": [
            {
                "quality": "hd",
                "type": "video/mp4",
                "width": 1920,
                "height": 1080,
                "link": "",
                "created_time": "",
                "fps": 50,
                "size": 0,
                "md5": "",
                "link_secure": ""
            },
            {
                "quality": "hd",
                "type": "video/mp4",
                "width": 1920,
                "height": 1080,
                "link": ",
                "created_time": "",
                "fps": 25,
                "size": 0,
                "md5": "",
                ""
            },
            {
                "quality": "sd",
                "type": "video/mp4",
                "width": 960,
                "height": 540,
                "link": "",
                "created_time": "",
                "fps": 25,
                "size": 0,
                "md5": "",
                "link_secure": ""
            },
            {
                "quality": "sd",
                "type": "video/mp4",
                "width": 640,
                "height": 360,
                "link": "",
                "created_time": "",
                "fps": 25,
                "size": 0,
                "md5": "",
                "link_secure": ""
            },
            {
                "quality": "hd",
                "type": "video/mp4",
                "width": 1280,
                "height": 720,
                "link": "",
                "created_time": "",
                "fps": 50,
                "size": 0,
                "md5": "",
                "link_secure": ""
            },
            {
                "quality": "hls",
                "type": "video/mp4",
                "link": "",
                "created_time": "",
                "fps": 50,
                "size": 0,
                "md5": "",
                "link_secure": ""
            }
        ]
   //More data here
  }

I recommend using the HLS link as it'll automatically adjust the video quality based on the user's internet speed.

Upvotes: 1

Related Questions