I 'm searching the docs, but haven't succeeded yet to find a sample code. I need to play videos from my stream server. Is there any way? or may be react-js does not support videos on android yet.
Create a folder named rnvideoproject . Once you have done this, open the terminal/command prompt and navigate to the folder you have just created. Once you have done this, enter the command react-native init rnvideoproject . This will begin to create the React Native project and all the necessary files/folders.
Using react-native-video First, we import the video component from the library into the component where we want the video to be displayed. Of course, for the video component to display anything, we need a video file. This can either be a file in your project or a link to an external resource.
To play video in React, you need to use the HTML video element, specify a source of the video and its type. Along with these required attributes, you can provide additional properties to customize the video player.
Yep. Took me a while to figure out, but the solution is easy.
Use react-native-video component which is cross-platform iOS and Android.
Implementation: Couldn't be simpler...
<Video source={{ uri: 'http://STREAM_URL/playlist.m3u8' }} />
Tips for playing live HLS .m3u8 streams on iOS and Android:
On iOS: Be sure to allow the stream's source domain as an exception domain on App Transport Security Settings on info.plist. While testing, I set "Allow Arbitrary Loads" to YES. Before I did this, the stream didn't come through at all.
On Android: Use the new exoplayer variant introduced in react-native-video 1.0. Here's how to enable that: #426 (comment)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With