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="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="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