Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to add video elements in React Native (for Android)?

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.

like image 238
Farshid Ashouri Avatar asked Dec 10 '15 21:12

Farshid Ashouri


People also ask

How do I add a video to React Native app?

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.

How do you use React Native video in React Native?

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.

How do you add a video to react?

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.


1 Answers

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)

like image 123
dgurns Avatar answered Nov 15 '22 10:11

dgurns