Package Exports

@cellc/react-native-video-suite

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cellc/react-native-video-suite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-media-kit

Video(and audio) component for react-native apps, supporting both iOS and Android, with API similar to HTML video.

Supported media types:

iOS: Should be same as those supported by AVPlayer
Android: Shold be same as those supported by ExoPlayer

Install

npm install --save react-native-media-kit@latest

iOS

Step 1: Right click on Libraries and choose 'Add files to "Project Name"'.
Step 2: Navigate to project_name/node_modules/react-native-media-kit/ios/ and add the file react-native-media-kit.xcodeproj.
Step 3: Open project settings and at the top choose 'Build Phases'
Step 4: Expand the 'Link Binary With Libraries' section.
Step 5: Click the + at the bottom of the list
Step 6: Add the libreact-native-media-kit.a file

Android

android/settings.gradle

include ':react-native-media-kit'
project(':react-native-media-kit').projectDir = new File('../node_modules/react-native-media-kit/android')

android/app/build.gradle

dependencies {
    ...
    compile project(':react-native-media-kit')
}

MainActivity.java (or MainApplication on rn 0.29+)

import com.greatdroid.reactnative.media.MediaKitPackage;
...
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
            new MediaKitPackage()
    );
}

Documentation

import {Video} from 'react-native-media-kit';
...
render() {
  return (
      <Video
      style={{width: width, height: width / (16/9)}}
      src={'http://v.yoai.com/femme_tampon_tutorial.mp4'}
      autoplay={false}
      preload={'none'}
      loop={false}
      controls={true}
      muted={false}
      poster={'http://static.yoaicdn.com/shoppc/images/cover_img_e1e9e6b.jpg'}
    />
  );
}

API

The API is designed to mimics html <video />. (For now, the Video and Audio component are identical)

Properties

key	value	iOS	Android
src	the URL of the video	OK	OK
autoplay	true to automatically begins to play. Default is false.	OK	OK
preload	can be 'none', 'auto'. Default is 'none'.	OK	OK
loop	true to automatically seek back to the start upon reaching the end of the video. Default is 'false'.	OK	OK
controls	true to show controls to allow user to control video playback, including seeking, and pause/resume playback. Default is true.	OK	OK
poster	an image URL indicating a poster frame to show until the user plays.	OK	OK
muted	true to silence the audio. Default is false.	OK	OK
onPlayerPaused		OK	OK
onPlayerPlaying		OK	OK
onPlayerFinished		OK	OK
onPlayerBuffering		OK	OK
onPlayerBufferOK		OK	OK
onPlayerProgress		OK	OK
onPlayerBufferChange		OK	OK

pause
play
stop
seekTo

For details about the usage of above APIs, check library/media-player-view.js.

TODO

Downloading
DRM
Google Play
Air Play