Play Amazon S3 cloudefront video in React Native - react-native

Question

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.

Answer 1

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,
},
});