react-html5-video-editor

React / redux video element with a crop marker. Crop markers emit Redux actions when dragged.

Features:

• simple & clean
• video crop
• effect composer
• numerous formats support
• customizable

Do not hesitate to post an issue to request a feature (seriously).

Roadmap

• enhanced video previews
• effect composer
• multiple tracks

Quickstart

Install

npm init
npm install react-html5-video-editor --save
ls node_modules/react-html5-video-editor/dist/react-html5-video-editor.js # include this in <script>-tag

Basic browser usage

<script type="text/javascript" src="https://github.com/evgenity/react-html5-video-editor/raw/master/js/react-html5-video-editor.js"></script>

<div id="root"></div>
<script type="text/javascript">
    ReactHtml5VideoEditor.render_editor('img/poster.png', 'video/small.mp4')
</script>

React usage

import {RdxVideo, Overlay, Controls} from 'react-html5-video-editor'
ReactDOM.render(
  <RdxVideo autoPlay loop muted poster="src/img/poster.png" store={store}>
    <Overlay />
    <Controls />
    <source src="https://github.com/evgenity/react-html5-video-editor/raw/master/src/video/small.mp4" type="video/mp4" />
  </RdxVideo>
  ,
  document.getElementById('root')
);

Configuration

RdxVideo.Props = {
    autoPlay: false,
    loop: false,
    controls: true,
    volume: 1.0,
    preload: "auto",
    cropEnabled: true;
}

License

Code released under GNU GPLv3