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 comes after 0.28).
Supported media types:
-
iOS: Should be same as those supported by AVPlayer
-
Android: Shold be same as those supported by ExoPlayer
npm install --save react-native-media-kit@latest
For now, just drag react-native-media-kit.xcodeproj into your Xcode project and link the libreact-native-media-kit.a library.
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()
);
}
The API is designed to mimics html <video />
. (For now, the Video and Audio component are identical)
Liroo added some custom/js props which is not relative to html.
See #26 for further information about this PR.
key | value | type | default |
---|---|---|---|
src | the URL of the video | string (url) | null |
autoplay | true to automatically begins to play. | bool | false |
preload | can be 'none', 'auto'. | string | 'none' |
loop | true to automatically seek back to the start upon reaching the end of the video. | bool | false |
muted | true to silence the audio. | bool | false |
controls | true to show controls to allow user to control video playback, including seeking, and pause/resume playback. | bool | true |
poster | an image URL indicating a poster frame to show until the user plays. | string (url) | null |
title | If controls is true and title is defined, title will be display on the video |
string | null |
fullscreenEnable | Add a fullscreen button controls (You must create your own view in full screen. Disable if you do not want) | bool | true |
onFullScreen | Callback called when fullscreen button is pressed | func (fullscreenState: bool, currentTime: number) | undefined |
showControlsTimer | in ms, the time of appearance of controls | number | 2500 (2.5s) |
seekTo | a special parameter that will start the video at the given value (normally used to manage the view in full screen) | number | 0 |
/*
* Demo/App.js
*/
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'}
/>
);
}
For details about the usage of above APIs, check library/MediaPlayerView.js
.
- background play
- Hit on slider (PR on the original dependency)