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 tracksQuickstart
Install
npm init
npm install react-html5-video-editor --save
ls node_modules/react-html5-video-editor/dist/bundle.jsBasic usage
<body>
<div id="root"></div>
<script type="text/javascript" src="js/bundle.js"></script>
</body>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;
}