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

A component for react-native, as seen in react-native-login!

Requires react-native >= 0.4.4

Add it to your project

• Run npm install react-native-video --save
• Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name"
  • (use the RCTVideo project rather than the one pictured in screenshot).
• Add libRTCVideo.a to Build Phases -> Link Binary With Libraries .
• Add .mp4 video file to project and to Build Phases -> Copy Bundle Resources
• Whenever you want to use it within React code now you can: var Video = require('react-native-video');

Usage

// 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.
<Video source={{uri: "background"}} // Can be a URL or a local file.
       rate={1.0}                   // 0 is paused, 1 is normal.
       volume={1.0}                 // 0 is muted, 1 is normal.
       muted={false}                // Mutes the audio entirely.
       paused={false}               // Pauses playback entirely.
       resizeMode="cover"           // Fill the whole screen at aspect ratio.
       repeat={true}                // Repeat forever.
       onLoadStart={this.loadStart} // Callback when video starts to load
       onLoad={this.setDuration}    // Callback when video loads
       onProgress={this.setTime}    // Callback every ~250ms with currentTime
       onEnd={this.onEnd}           // Callback when playback finishes
       onError={this.videoError}    // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

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

Static Methods

seek(seconds)

Seeks the video to the specified time (in seconds). Access using a ref to the component

Examples

• See an Example integration in react-native-login.

• Try the included VideoPlayer example yourself:

  git clone [e-mail]:brentvatne/react-native-video.git
  cd react-native-video/Examples/VideoPlayer
  npm install
  open VideoPlayer.xcodeproj
  
  

  Then Cmd+R to start the React Packager, build and run the project in the simulator.

TODOS

• Add some way to interface with seekToTime
• Add support for captions
• Support require('video!...')
• Add support for playing multiple videos in a sequence (will interfere with current repeat implementation)
• Callback to get buffering progress for remote videos
• Bring API closer to HTML5 <Video> reference

MIT Licensed