├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── dist └── index.js ├── example ├── app.css ├── app.js └── index.html ├── index.js ├── package.json ├── src └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | example/bundle* 30 | .publish 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, eSportsGuy 2 | 3 | Permission to use, copy, modify, and/or distribute this software for any 4 | purpose with or without fee is hereby granted, provided that the above 5 | copyright notice and this permission notice appear in all copies. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 8 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 9 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 10 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 11 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 12 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 13 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 14 | 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-videojs 2 | react videojs wrapper 3 | 4 | ### Installtion 5 | ``` sh 6 | npm install react-videojs --save 7 | ``` 8 | 9 | ### Demo 10 | http://esportsguy.github.io/react-videojs/ 11 | 12 | ### Usage 13 | 14 | Video.js should be loaded globally. 15 | 16 | ``` html 17 | 18 | ``` 19 | 20 | ``` javascript 21 | 26 | ``` 27 | 28 | ### License 29 | ISC 30 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var assign = require('object-assign'); 4 | var cx = require('classnames'); 5 | var blacklist = require('blacklist'); 6 | var React = require('react'); 7 | 8 | module.exports = React.createClass({ 9 | displayName: 'VideoJS', 10 | 11 | componentDidMount: function componentDidMount() { 12 | var self = this; 13 | var player = videojs(this.refs.video, this.props.options).ready(function () { 14 | self.player = this; 15 | self.player.on('play', self.handlePlay); 16 | }); 17 | if (this.props.onPlayerInit) this.props.onPlayerInit(player); 18 | }, 19 | 20 | 21 | handlePlay: function handlePlay() { 22 | if (this.props.onPlay) this.props.onPlay(this.player); 23 | }, 24 | 25 | render: function render() { 26 | var props = blacklist(this.props, 'children', 'className', 'src', 'type', 'onPlay', 'onPlayerInit'); 27 | props.className = cx(this.props.className, 'videojs', 'video-js vjs-default-skin'); 28 | 29 | assign(props, { 30 | ref: 'video', 31 | controls: true 32 | }); 33 | 34 | return React.createElement( 35 | 'div', 36 | null, 37 | React.createElement( 38 | 'video', 39 | props, 40 | React.createElement('source', { src: this.props.src, type: this.props.type }) 41 | ) 42 | ); 43 | } 44 | }); -------------------------------------------------------------------------------- /example/app.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: border-box; 3 | } 4 | 5 | .app { 6 | max-width: 400px; 7 | margin: 0 auto; 8 | } -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | var Video = require('../src/'); 4 | var _package = require('../package.json'); 5 | 6 | var App = React.createClass({ 7 | displayName: 'App', 8 | 9 | handlePlay(player) { 10 | console.log('onPlay', player); 11 | }, 12 | 13 | render() { 14 | return ( 15 |