@cellc/react-native-video-suite/README.md

The native video player for Black. It was forked from react-native-media-kit.

# 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](https://developer.apple.com/library/ios/documentation/AVFoundation/Reference/AVPlayer_Class/)


* Android: Shold be same as those supported by [ExoPlayer](https://github.com/google/ExoPlayer)

![](Demo/demo.gif).

## 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 />`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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