CODEWITHSUNDEEP
react-native
Kedar Dave
Kedar Dave

Reputation: 481

Play Amazon S3 cloudefront video in React Native

Is there a way to play hosted video from Amazon to React Native application? I have tried with React Native Af Video player but could not play it.

The video URL is like this: https://d3codsxyyh2kcu.cloudfront.net/https?Expires=1547218475&Signature=MqxFm4cvR2IYfruCKEaM9JvaFDa7a-0ipdhK9QLxiRFIDcc1jHgvrpNLaPdId1nK5EXJND9hIGnAZvevdRhkA9Uocmd-I3QRdPNumv2BCuSBARgiMcu~lnwgQ24G9r1uO~ZlQ5CDhPTyJYFqC8DyFuzbGnHrTRfMTfPYIUZSi5lvk22oXGDOqARra~-KoAKk-vPXAxxUo1BjCXw3V06t6JNxCCrhaGiS3~OaRc28wGSRacm7F5A9rf~eEWSUWQ~17lUC-Jm6jnWAI9zqSqtyIk4ladboX7FNFi8N12wq39KWinYqvhMNkJcmxy1lGLCgEbabndfJc~yez7c2d17~Rw__&Key-Pair-Id=my_key_id

Please help me in this regard.

Upvotes: 1

Views: 4299

Answers (1)

Victor
Victor

Reputation: 4199

you can use react-native-video.

I have worked on projects that provides signed url for videos as list. These urls can be streamed / played using this pacakge.

Only thing to note is you need to generate signed S3 url so that video will play easily. One way to check this is you can directly copy paste the signed url on the browser and it should stream right away.

PS: I also had doubts that s3 urls might not be playable using react-native-video, But turns out, providing signedUrl video will work. you can use onError to debug issues. (Make sure the url is playing from chrome before eu test it on RNApp)

Sample Code 

// Load the module

import Video from 'react-native-video';



<Video source={{uri: "s3 signed url"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
       onBuffer={this.onBuffer}                // Callback when remote video is buffering
       onError={this.videoError}               // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Upvotes: 2

Related Questions