TheWidlarzGroup/react-native-video

A

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.react-native-community:react-native-video:'
	}
	dependencies {
		implementation("com.github.react-native-community:react-native-video:")
	}
	<dependency>
	    <groupId>com.github.react-native-community</groupId>
	    <artifactId>react-native-video</artifactId>
	    <version></version>
	</dependency>

                            
    libraryDependencies += "com.github.react-native-community" % "react-native-video" % ""
        
        

                            
    :dependencies [[com.github.react-native-community/react-native-video ""]]

Readme

react-native-video

🎬 <Video> component for React Native

Documentation

documentation is available at docs.thewidlarzgroup.com/react-native-video/

Examples

You can find several examples demonstrating the usage of react-native-video here. <br /> These include a basic usage and DRM example (with a free DRM stream).

Usage

// Load the module

import Video, {VideoRef} from 'react-native-video';

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.

const VideoPlayer = () => {
 const videoRef = useRef<VideoRef>(null);
 const background = require('./background.mp4');

 return (
   <Video 
    // Can be a URL or a local file.
    source={background}
    // Store reference  
    ref={videoRef}
    // Callback when remote video is buffering                                      
    onBuffer={onBuffer}
    // Callback when video cannot be loaded              
    onError={onError}               
    style={styles.backgroundVideo}
   />
 )
}

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

Roadmap

You can follow our work on the library at Roadmap.

Community support

We have an discord server where you can ask questions and get help. Join the discord server

Enterprise Support

<p> 📱 <i>react-native-video</i> is provided <i>as it is</i>. For enterprise support or other business inquiries, <a href="https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=readme&utm_campaign=enterprise&utm_id=text#Contact">please contact us 🤝</a>. We can help you with the integration, customization and maintenance. We are providing both free and commercial support for this project. let's build something awesome together! 🚀 </p> <a href="https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=readme&utm_campaign=enterprise&utm_id=banner"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./docs/assets/baners/twg-dark.png" /> <source media="(prefers-color-scheme: light)" srcset="./docs/assets/baners/twg-light.png" /> <img alt="TheWidlarzGroup" src="./docs/assets/baners/twg-light.png" /> </picture> </a>