https://github.com/ldn0x7dc/react-native-media-kit

Video(and audio) component for react-native apps, supporting both iOS and Android. A unified and elegant player controller is provided by default. The API is similar with HTML video.
https://github.com/ldn0x7dc/react-native-media-kit

Last synced: about 2 months ago
JSON representation

Video(and audio) component for react-native apps, supporting both iOS and Android. A unified and elegant player controller is provided by default. The API is similar with HTML video.

• Host: GitHub
• URL: https://github.com/ldn0x7dc/react-native-media-kit
• Owner: ldn0x7dc
• Created: 2016-06-03T11:00:37.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-12-13T13:17:48.000Z (about 6 years ago)
• Last Synced: 2024-05-13T15:23:05.401Z (8 months ago)
• Language: Java
• Homepage:
• Size: 22.7 MB
• Stars: 200
• Watchers: 13
• Forks: 71
• Open Issues: 41
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native-native-modules - react-native-media-kit ★171 - native apps, supporting both iOS and Android. A unified and elegant player controller is provided by default. The API is similar with HTML video. (<a name="Image-&-Audio-&-Video-&-Docs:-Native-Modules">Image, Audio, Video & Docs: Native Modules</a>)

README

        
# 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+ (The limit exists due to [ActivityIndicator](https://facebook.github.io/react-native/docs/activityindicator.html) comes after 0.28).

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

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 (or MainApplication on rn 0.29+)**

```

import com.greatdroid.reactnative.media.MediaKitPackage;

...

protected List getPackages() {

    return Arrays.asList(

        new MainReactPackage(),

            new MediaKitPackage()

    );

}

```

## Documentation

```

import {Video} from 'react-native-media-kit';

...

render() {

  return (

  	

  );

}

```

### API

The API is designed to mimics html [``](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/MediaPlayerView.js`.

## TODO

* background play