react-video-trimmer

    1.3.0-0 • Public • Published

    react-video-trimmer

    Amazing React component for manipulating video length.

    With the aid of FFMPEG in the browser, it get easier to do amazing things with media content.

    Demo

    See Demo

    Installation

    npm install --save react-video-trimmer

    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

    Install

    npm i react-video-trimmer

    DownloadsWeekly Downloads

    48

    Version

    1.3.0-0

    License

    ISC

    Unpacked Size

    837 kB

    Total Files

    25

    Last publish

    Collaborators

    • limistah