video-trimmer-react

    1.0.1 • Public • Published

    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

    Install

    npm i video-trimmer-react

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    730 kB

    Total Files

    25

    Last publish

    Collaborators

    • kwekuq