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

See 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

import ReactVideoTrimmer from "react-video-trimmer";
<div>
  <ReactVideoTrimmer timeLimit={20} showEncodeBtn />
</div>;

Props

timeRange: Number

Start and end value in seconds the trimmer should restrict to.ti

import React from "react";
import ReactVideoTrimmer from "react-video-trimmer";
import "react-video-trimmer/dist/style.css";

const Trimmer = () => {
  return (
    <div>
      <ReactVideoTrimmer timeRange={20} />
    </div>
  );
};

onVideoEncode: function

Handler that receives the video encoding once it has been encoded

import React from "react";
import ReactVideoTrimmer from "react-video-trimmer";
import "react-video-trimmer/dist/style.css";

const Trimmer = () => {
  const handleVideoEncode = React.useCallback(result => {
    console.log("Encoding Result:", result);
  });
  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...

import React from "react";
import ReactVideoTrimmer from "react-video-trimmer";
import "react-video-trimmer/dist/style.css";

const Trimmer = () => {
  const handleVideoEncode = React.useCallback(result => {
    console.log("Encoding Result:", result);
  });
  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

import React from "react";
import ReactVideoTrimmer from "react-video-trimmer";
import "react-video-trimmer/dist/style.css";

const Trimmer = () => {
  const trimmerRef = React.useRef();
  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.

import React from "react";
import { preloadWebVideo } from "react-video-trimmer";

// It is a function, no other process is required
preloadWebVideo();

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