This is react-native component for android, to handle video editor like trim video, filter video and thumbnail selection. But this component only use for preview only not prosess video editor (mybe next version). This Component have 5 child component :
- VideoPlayer = This Component to play, filter and crop video without controler
- VideoPlayerControl = This Component to play, filter and crop video and it have player control like play button, replay button, crop button and seek bar.
- VideoTrimmer = This Component to handle trim (start pos and end pos) by default max trim duration is 10min.
- VideoImagePreview = This Component to preview video filter in image (you can use it for filter button).
- VideoThumbnail = This Component to select thumbnail from video.
| Video Trim |
|---|
 |
| Video Filter |
|---|
 |
| Video Thumbnail |
|---|
 |
For now you can add this component manually to your project, using :
npm install --save https://github.com/RZulfikri/react-native-android-video-editor.git
then linking component:
react-native link react-native-android-video-editor
- Video Trimmer
import {VideoPlayerControl, VideoTrimmer} from 'react-native-android-video-editor'
...
export default class trimViewo extends Components{
state = {
//example
// src : "/storage/emulated/0/Download/10 MINUTES OF FUNNY CATS.mp4"
src : "yout video source",
}
_onCropListener = (e) => {
console.log("IS CROP?"+e)
}
_onChangeTrim = (e) =>{
console.log("START POS : "+e.startPos+" "+"END POS : "+e.endPos)
this.videoPlayerControlRef.setLimit(e)
}
render(){
return(
<View>
<VideoPlayerControl
ref={ref => this.videoPlayerControlRef = ref}
src={this.state.src}
startPos = {10000}
endPos = {60000}
onCrop = {(e) => this._onCropListener(e)}
/>
<VideoTrimmer
src={this.state.src}
minDuration={60000}
onChange = {(e) => this._onChangeTrim(e)}
/>
</View>
);
}
}
- Video Filter
import {VideoPlayerControl, VideoImagePreview} from 'react-native-android-video-editor'
...
export default class trimViewo extends Components{
state = {
//example
// src : "/storage/emulated/0/Download/10 MINUTES OF FUNNY CATS.mp4"
src : "yout video source",
}
_onCropListener = (e) => {
console.log("IS CROP?"+e)
}
_onFilter = (filter) =>{
console.log("FILTER "+filter)
this.videoPlayerControlRef.filterVideo(filter)
}
render(){
return(
<View>
<VideoPlayerControl
ref={ref => this.videoPlayerControlRef = ref}
src={this.state.src}
startPos = {10000}
endPos = {60000}
onCrop = {(e) => this._onCropListener(e)}
/>
<ScrollView horizontal = {true}>
<TouchableWithoutFeedback onPress={() => this._onFilter(0)}>
<VideoImagePreview
src={this.state.src}
pos={10000}
crop={true}
filter={0}
/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this._onFilter(1)}>
<VideoImagePreview
src={this.state.src}
pos={10000}
crop={true}
filter={1}
/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this._onFilter(2)}>
<VideoImagePreview
src={this.state.src}
pos={10000}
crop={true}
filter={2}
/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this._onFilter(3)}>
<VideoImagePreview
src={this.state.src}
pos={10000}
crop={true}
filter={3}
/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this._onFilter(4)}>
<VideoImagePreview
src={this.state.src}
pos={10000}
crop={true}
filter={4}
/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this._onFilter(5)}>
<VideoImagePreview
src={this.state.src}
pos={10000}
crop={true}
filter={5}
/>
</TouchableWithoutFeedback>
</ScrollView
</View>
);
}
}
- Video Thumbnail
import {VideoPlayer, Video} from 'react-native-android-video-editor'
...
export default class trimViewo extends Components{
state = {
//example
// src : "/storage/emulated/0/Download/10 MINUTES OF FUNNY CATS.mp4"
src : "yout video source",
starPos : 10000,
endPos : 60000,
}
_onSeekPos = (seekPos) =>{
console.log("SEEK POS "+seekPos)
this.videoPlayerRef.seek(seekPos + this.state.starPos)
}
render(){
return(
<View>
<VideoPlayer
ref={ref => this.videoPlayerRef = ref}
src={this.state.src}
seekTo = {tis.state.starPos}
/>
<VideoThumbnail
src={this.state.src}
style={{width: Dimensions.get('window').width, height: 62}}
filter = {0}
startDur = {this.state.starPos}
endDur = {this.state.endPos}
onSeekPos = {(e) => this._onSeekPos(e)}
/>
</View>
);
}
}
- Video Player
| Props | Type | Description |
|---|---|---|
| scr | String (required) | it use to set video path to video player example accepted path "/storage/emulated/0/Download/10 MINUTES OF FUNNY CATS.mp4". |
| crop | boolean | it use to set video croped square in center or no, (true = crop / false = no crop). |
| autoplay | boolean | it use to set video autolay when it ready, (true = autoplay / false =no autoplay). |
| filter | int | it use to set filter to video (choose number between 0 - 19). |
| seekTo | int | it use to seek video player at first time (using time in milisecond 1000 = 1sec). |
| style | object | it uset to style video player (it have default style width and height). |
- Video Player Control
| Props | Type | Description |
|---|---|---|
| scr | String (required) | it use to set video path to video player example accepted path "/storage/emulated/0/Download/10 MINUTES OF FUNNY CATS.mp4". |
| crop | boolean | it use to set video croped square in center or no, (true = crop / false = no crop). |
| autoplay | boolean | it use to set video autolay when it ready, (true = autoplay / false =no autoplay). |
| filter | int | it use to set filter to video (choose number between 0 - 19). |
| style | object | it use to style video player (it have default style width and height). |
| startPos | int | it use to set start position of video (using time in milisecond 1000 = 1sec). |
| endPos | int | it use to set end position of video (using time in millisecond 1000 = 1sec). |
- Video Image Preview
| Props | Type | Description |
|---|---|---|
| scr | String (required) | it use to set video path to video player example accepted path "/storage/emulated/0/Download/10 MINUTES OF FUNNY CATS.mp4". |
| pos | int | it use to set posisiton of video, that you want to view (using time in millisecond 1000 = 1sec). |
| crop | boolean | it use to set video croped square in center or no, (true = crop / false = no crop). |
| filter | int | it use to set filter to video (choose number between 0 - 19). |
| style | object | it use to style video player (it have default style width and height). |
- Video Trimmer
| Props | Type | Description |
|---|---|---|
| scr | String (required) | it use to set video path to video player example accepted path "/storage/emulated/0/Download/10 MINUTES OF FUNNY CATS.mp4". |
| minDuration | int | it use to set minimum tim duration (using time in milisecond 1000 = 1sec). |
| onChange | function | it use to callback left and right seek position (callback as object {startPos, endPos}). |
| style | object | it use to style video player (it have default style width and height). |
- Video Thumbnail
| Props | Type | Description |
|---|---|---|
| scr | String (required) | it use to set video path to video player example accepted path "/storage/emulated/0/Download/10 MINUTES OF FUNNY CATS.mp4". |
| filter | int | it use to set filter to video (choose number between 0 - 19). |
| startDur | int | it use to set start position of video (using time in milisecond 1000 = 1sec). |
| endDur | int | it use to set end position of video (using time in millisecond 1000 = 1sec). |
| onSeekPos | int | it use to callback seek position of thumbnail selec (callback is video position as intger in millisecond). |
| style | object | it use to style video player (it have default style width and height). |
this method can be called using component ref like this.videoPlayerRef.pause()
- VideoPlayer
| Method Name | Description |
|---|---|
| pause() | it use to pause video |
| play() | it use to play video |
| crop() | it use to crop video as square in the middle |
| uncrop() | it use to uncrop video |
| filter(int) | it use to set filter to video @param int (0 - 19) |
| seek(int) | it use to seek video @param int (time video in milisecond, 1000 = 1sec) |
- VideoPlayerControl
| Method Name | Description |
|---|---|
| pauseVideo() | it use to pause video |
| playVideo() | it use to play video |
| cropVideo() | it use to crop video as square in the middle |
| unCropVideo() | it use to uncrop video |
| filterVideo(int) | it use to set filter to video @param int (0 - 19) |
| setLimit(object) | it use to set limit of video @param object {startPos, endPos} |
most of this method use as internal method, except setLimit(object).
| Filter code | Filter Name |
|---|---|
| 0 | No Effect |
| 1 | Black White Effect |
| 2 | Brigtness Effect |
| 3 | Contrass Effect |
| 4 | Cross Process Effect |
| 5 | Documentary Effect |
| 6 | Duo Tone Effect (Cyan and Blue) |
| 7 | Fill Light Effect |
| 8 | Gamma Effect |
| 9 | GreyScale Effect |
| 10 | Hue Effect |
| 11 | Invert Color Effect |
| 12 | Lamoish Effect |
| 13 | Posterize Effect |
| 14 | Saturation Effect |
| 15 | Sephia Effect |
| 16 | Sharpness Effect |
| 17 | Temperature Effect |
| 18 | Tint Effect (Blue) |
| 19 | Vignette Effect |