Giter Club home page Giter Club logo

react-native-video's Introduction

react-native-video

A

Requires react-native >= 0.4.4

Add it to your project

  1. Run npm install react-native-video --save
  2. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name"
    • Screenshot Screenshot (use the RCTVideo project rather than the one pictured in screenshot).
  3. Add libRTCVideo.a to Build Phases -> Link Binary With Libraries (Screenshot).
  4. Add .mp4 video file to project and to Build Phases -> Copy Bundle Resources
  5. 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 [email protected]: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

react-native-video's People

Contributors

brentvatne avatar isair avatar johanneslumpe avatar mwilc0x avatar markburns avatar publicparadise avatar jcfrancisco avatar christopherdro avatar swatto avatar browniefed avatar jim-lake avatar jsierles avatar machard avatar nickhudkins avatar nishanthshankar avatar rpastorelle avatar qingfeng avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.