react-thumbnail-extractor
v0.0.5
Published
React Component to extract thumbnails of a giving video"
Downloads
87
Maintainers
Readme
React Thumbnail Extractor
React Component to extract thumbnails of a giving video on client side.
Based on SCRMHub/clientside-video-thumbnails
Demo
https://antoniopacheco.github.io/react-thumbnail-extractor-demo/
Installation
$ npm install --save react-thumbnail-extractor
Usage
import ThumbnailExtractor from 'react-thumbnail-extractor'
onCapture = (image) => {
console.log("image captured",image)
}
onComplete = (images) => {
console.log("capture completed", onComplete)
}
render(){
<ThumbnailExtractor console={this.console} onCapture={this.onCapture} videoFile={this.state.file} />
}
Options
You can pass the following options as props to ThumbnailExtractor
:
- videoFile : video
- displayImages: Boolean, to render images in the component
- thumbnailsClass: String, class to be added to images
- maxWidth: Integer, max width of the generated thumbnails
- maxHeight: Integer, max height of the generated thumbnails
- count: Integer, number of thumbnails to get extracted from the video, default: 8
The thumbnails will respect the aspect ratio of the video, independently of the maxWidth and maxHeight
Events
You can pass the following events as props to ThumbnailExtractor
:
- onBeforeCapture: void, first event called after the parsing of the video started
- onStartCapture: void, event called after video.onloadedmetadata gets triggered (just before it plays)
- onUnsupportedVideo: void, event called on video error
- onCapture: array[images], event called after a new thumbnail is generated, it returns array of all of the images generated so far
- onComplete: array[images], event called after all of the
count
thumbnails got generated. - onCompleteDetails: event called after all of the
count
thumbnails got generated with the following details:
{
thumbnailCount,
videoDuration,
videoInterval,
thumbWidth,
thumbHeight,
videoStart
}