react-native-video

What is react-native-video?

The react-native-video package is a versatile video playback library for React Native applications. It allows developers to embed and control video playback within their mobile apps, supporting a wide range of video formats and providing various customization options.

What are react-native-video's main functionalities?

Basic Video Playback

This feature allows you to play a video from a given URI. The video is embedded within a React Native component and can be styled using standard React Native styles.

import Video from 'react-native-video';

const BasicVideoPlayer = () => (
  <Video
    source={{ uri: 'https://www.example.com/video.mp4' }}
    style={{ width: 300, height: 200 }}
  />
);

Custom Controls

This feature enables the default video controls, such as play, pause, and seek, providing a more interactive video playback experience.

import Video from 'react-native-video';

const CustomControlsVideoPlayer = () => (
  <Video
    source={{ uri: 'https://www.example.com/video.mp4' }}
    style={{ width: 300, height: 200 }}
    controls={true}
  />
);

Event Handling

This feature allows you to handle various video playback events, such as when the video ends or if an error occurs during playback.

import Video from 'react-native-video';

const EventHandlingVideoPlayer = () => (
  <Video
    source={{ uri: 'https://www.example.com/video.mp4' }}
    style={{ width: 300, height: 200 }}
    onEnd={() => console.log('Video has ended')}
    onError={(error) => console.log('Error:', error)}
  />
);

Looping Video

This feature enables the video to loop continuously, restarting automatically when it reaches the end.

import Video from 'react-native-video';

const LoopingVideoPlayer = () => (
  <Video
    source={{ uri: 'https://www.example.com/video.mp4' }}
    style={{ width: 300, height: 200 }}
    repeat={true}
  />
);

Other packages similar to react-native-video

react-native-video-controls

The react-native-video-controls package provides a customizable set of video controls for the react-native-video component. It extends the functionality of react-native-video by adding a set of default controls that can be easily customized.

react-native-youtube

The react-native-youtube package allows you to embed YouTube videos in your React Native application. It provides a simple interface for playing YouTube videos and supports various YouTube player features, such as autoplay, fullscreen, and video quality settings.

react-native-vlc-media-player

The react-native-vlc-media-player package is a React Native wrapper for the VLC media player. It supports a wide range of video formats and provides advanced playback features, such as network streaming, subtitles, and hardware acceleration.

README

react-native-video

🎬 <Video> component for React Native

Documentation

documentation is available at thewidlarzgroup.github.io/react-native-video/

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

Community support

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

Enterprise Support

📱 react-native-video is provided as it is. For enterprise support or other business inquiries, please contact us 🤝. 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! 🚀

Changelog

6.4.1 (2024-07-12)

Bug Fixes

• expo plugin export (#3992) (de8ade0)

• fix(ios): remove pip check for other platforms (#3991) (40a72825)

• feat: add isSeeking to onPlaybackStateChanged (#3899) (111a5d21)

• chore(android): migrate DataSourceUtil to Kotlin (#3984) (b25e43ee)

• chore(android): migrate AspectRatioFrameLayout to Kotlin (#3985) (452e42f1)

• refactor: move view type and drm in source (#3867) (66dcf32b)

• feat: add expo plugins (#3933) (08f6caa6)

• docs: update deprecated tool (#3982) (25c74e05)

• chore(android): migrate DefaultReactExoplayerConfig to Kotlin (#3983) (1728373d)

• fix(ios): don't pause playback when entering background (#3973) (ccffcfd7)

• chore(example/basic): refactor state variable (#3949) (a3ecc010)

• feat(android): Bump default media3 version from v1.1.1 to v1.3.1 (#3977) :warning: need targetSdkVersion 34 (7562669f)

• feat: modified Fabric example android build.gradle for resolving build issue (#3976) (1d6fb297)

• chore: upgrade react-native & expo version in the basic example app (#3964) (01a00b12)

• refactor(android): migrate VideoEventEmitter to Kotlin (#3962) (3c9b1b57)

• fix(ios): fix fullscreen view controller ANR (#3952) (7def3ac3)

• chore(example/fabric): bump up fabric example android deps (#3957) (de6e7196)

• refactor(ios): refactor NowPlayingInfoCenerManager.swift (#3968) (76c63291)

• fix(android): build issue on the latest react-native version (#3963) (530686ca)

• feat(fabric): updated ios podspec for implementing new architecture (#3961) (df29c231)

• fix(android): fix wrong module name (#3959) (3f11894c)

• refactor(android): migrate ReactVideoPackage to Kotlin (#3955) (702a0d9d)

• refactor(android): migrate VideoDecoderPropertiesModule to Kotlin (#3954) (99585987)

• feat: bump up fabric example react-native iOS (#3951) (e5a2ee3b)

• fix(android): added setAllowChunklessPreparation to HlsMediaSource.Factory to allow build success on projects without HLS support (#3948) (#3950) (322d7e99)

• refactor: basic example from class component to functional component (#3934) (d4f16486)

• chore(android): rework view type (#3940) (b431d09e)

• chore: update homepage field in package.json (#3945) (6e133768)

• feat(android): allow building exoplayer from source (#3932) (a7d834a8)

• feat: add plugins management (#3909) (91d27a60)

• Chore(docs): fix typo (#3938) (3cfb96ad)