react-video-trimmer
React component to trim video
With the aid of FFMPEG in the browser, it get easier to do amazing things with media content.
Demo
Installation
npm i -S video-trimmer-react
or:
yarn add react-video-trimmer
Usage
NOTE: Do import the styles from react-video-trimmer/dist/style.css
;<div> <ReactVideoTrimmer timeLimit=20 showEncodeBtn /></div>;
Props
timeRange: Number
Start and end value in seconds the trimmer should restrict to.ti
;;; const Trimmer = { return <div> <ReactVideoTrimmer timeRange=20 /> </div> ;};
onVideoEncode: function
Handler that receives the video encoding once it has been encoded
;;; const Trimmer = { const handleVideoEncode = React; return <div> <ReactVideoTrimmer onVideoEncode=handleVideoEncode timeRange= start: 10 end: 100 /> </div> ;};
loadingFFMPEGText: string
A text to tell users that FFMPEG is being loaded in the background.
Default: Please wait...
;;; const Trimmer = { const handleVideoEncode = React; return <div> <ReactVideoTrimmer onVideoEncode=handleVideoEncode timeRange= start: 10 end: 100 loadingFFMPEGText="Loading required libs..." /> </div> ;};
React Ref
Pass a ref to access all the static methods of ReactVideoTrimmer methods
;;; const Trimmer = { const trimmerRef = React; return <div> <ReactVideoTrimmer timeRange= start: 10 end: 100 ref=trimmerRef /> </div> ;};
Methods
handleFFMPEGStdout: void
A listener to ffmpeg-webworker
FFMPEGStdout
event
handleFFMPEGReady: void
A listener to ffmpeg-webworker
FFMPEGReady
event
handleFFMPEGFileReceived: void
A listener to ffmpeg-webworker
FFMPEGFileReceived
event
handleFFMPEGDone: void
A listener to ffmpeg-webworker
FFMPEGDone
event
Converts the returned result into a
Blob
, before updating the video player
decodeVideoFile: void
params
- file: Blob A Blob/File with type matching
video/*
- doneCB: function Called after the decode action is completed
handleFileSelected: void
Called when a valid video file is selected, in turn calls decodeVideoFile
for
proper handling
params
- file: Blob A Blob/File with type matching
video/*
handleEncodeVideo: void
Called when a valid video file is selected, in turn calls decodeVideoFile
for
proper handling
params
- file: Blob A Blob/File with type matching
video/*
handleDownloadVideo: void
Handler for the Download button onClick
event. Downloads the converted video
file
params
- encodedVideo: Blob Encoded video data converted to
Blob
Preloading ffmpeg
ffmpeg.js will not load until the component is in scope. To override this, a
preloadWebVideo
field has been included to make ffmpeg load ahead of this
component mount period.
;; // It is a function, no other process is required;
License
MIT
Credit
This library uses the work of the guys at ffmpeg-webworker
Based on the original package by @limistah:
https://github.com/limistah/react-video-trimmer