An HTML5 Video Player ReactJS Component
Originally created for thisisepic.com but is able to be used in any web project commercial or open source.
Feel free to open pull requests with added features, or you can open a ticket if you'd like to see a feature added.
Include react and the react video library in your document, then render the component to any element you wish.
<div id="video_stage"></div>
<script type="text/javascript" src="dist/jsx/react-video.js"></script>
Pass in an options object.
var videoStage = document.getElementById('video_stage')
var videoOptions = {
url: 'http://videos.thisisepic.com/2b9c1bf3-e19b-4be5-9d36-246c5d3607d8/high.mp4',
poster: 'http://thumbnails.thisisepic.com/b1ce00de-e687-4c1b-97ac-afa05a287327/large/frame_0005.png'
};
React.render(<VideoPlayer options={videoOptions} />, videoStage);
| Name | Type | Description |
|---|---|---|
| url | String | Any video file supported by HTML5 Video Tag |
| poster | String | jpg, png |
If you'd like to modify the css or jsx, you'll need to recompile the project using sass and jsx. Run these commands from the root directory:
sass --watch src/sass:dist/css
and or
jsx --watch src/ dist/
Volume Slider- Full Screen (partial support)
Responsive- Choose resolution
- Playlists
- Seeking, FF, RW
- Change playback speed
- Fri Mar 13
- Volume slider should work in most modern browsers
- Thu Mar 12
- Full screen support for webkit, rest coming soon
- video remains centered and keeps aspect ratio