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