0.0.4 • Published 6 years ago
react-canvas-video v0.0.4
react-canvas-video
react-canvas-video
is a React component with no other dependencies than prop-types, that protects your videos from being downloaded. To achive this I used a canvas that displaying 25 frames per second from hidden <video>
tag.
It is very simple protection, but our link to video is quite hard to find if one doesent know nothing about programming.
This is VERY FIRST version! I appreciate any contribution and issues.
Instalation
npm install react-canvas-video
Usage
Import component from package:
import CanvasVideo from 'react-canvas-video'
Use it in your JSX. You can pass several options in addition to src (this is code from example):
<CanvasVideo
src='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
options={{
text: 'This copy is registered for XXX!',
poster: 'https://images.pexels.com/photos/383557/pexels-photo-383557.jpeg?w=1260&h=750',
autoplay: true
}}
styles={{
barContainer: {
backgroundColor: 'pink'
}
}}
/>
Options are self-describing.
As you see you can pass own styles. You can pass stylesobject that looks like:
styles: PropTypes.shape({
canvas: PropTypes.object,
canvasConatiner: PropTypes.object,
barContainer: PropTypes.object,
button: PropTypes.object,
buttonIcon: PropTypes.object,
progress: PropTypes.object,
progressVol: PropTypes.object,
progressMuted: PropTypes.object,
time: PropTypes.object
})