@terranet/react-native-media-kit v0.0.16

react-native-media-kit

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

A default set of controls is provided to play/pause, seek and to display current playback and buffer progress.

Runs on react-native 0.28+. 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

For now, just drag react-native-media-kit.xcodeproj into your Xcode project and link the libreact-native-media-kit.a library.

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

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

Documentation

Quite same as the the HTML :

import {Video} from 'react-native-media-kit';
...
<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

You can use the onPlayerXXX callbacks to implement your custom controls.

Methods

• pause
• play
• stop
• seekTo

TODO

• toggle between normal size and fullscreen