Search code examples
react-nativereact-native-video

Play video with react-native-video from firebase storage


I use the 'react-native-video' library and it works with an external link such as: https://www.w3schools.com/tags/movie.mp4

The moment I add a URL of firebase storage it is not shown. Is there anyone who can help me with this? The link to the firebase video is: https://firebasestorage.googleapis.com/v0/b/ukkepuk-7d9dc.appspot.com/o/movie.mp4?alt=media&token=13ab1963-be1e-4974-9c5f-111d2d8256c5

This is the code that works:

   <Video 
source={{ uri: 'https://www.w3schools.com/tags/movie.mp4' }}
style={styles.backgroundVideo}
rate={1} volume={1} muted={true}
repeat={true}
resizeMode='cover' key="video1" 

/>

And not this one:

   <Video 
source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/ukkepuk-7d9dc.appspot.com/o/movie.mp4?alt=media&token=13ab1963-be1e-4974-9c5f-111d2d8256c5' }}
style={styles.backgroundVideo}
rate={1} volume={1} muted={true}
repeat={true}
resizeMode='cover' key="video1" 

/>

It is the same video. in both cases only 1 is in a remote location other than firebase storage. I don't get an error, only the app stops.


Solution

  • What you're doing now by passing the URI directly into the react-native-video is interpreted as an attempt to stream the video from the given URI. Firebase Storage doesn't support video streaming, so that's won't work. Streaming from a URI requires that the server on the other end be able to stream the given resource.

    If you want to play a video from Storage, you'll have to download entirety first(fetch the video), saved to a local file, then point the react-native-video at the local file for playback.