├── .babelrc
├── index.js
├── example
├── app.css
├── app.js
└── index.html
├── webpack.config.js
├── README.md
├── .gitignore
├── LICENSE
├── src
└── index.js
├── dist
└── index.js
└── package.json
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"]
3 | }
4 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./dist/index');
2 |
--------------------------------------------------------------------------------
/example/app.css:
--------------------------------------------------------------------------------
1 | *, *:before, *:after {
2 | box-sizing: border-box;
3 | }
4 |
5 | .app {
6 | max-width: 400px;
7 | margin: 0 auto;
8 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | entry: './example/app.js',
3 | output: {
4 | path: __dirname + '/example',
5 | filename: 'bundle.js',
6 | publicPath: "/example/",
7 | },
8 | module: {
9 | loaders: [
10 | {test: /\.js$/, loader: 'babel-loader'},
11 | {test: /\.json$/, loader: 'json-loader'}
12 | ]
13 | },
14 | externals: {
15 | 'react': 'React',
16 | 'react-dom': 'ReactDOM'
17 | },
18 | devtool: "source-map"
19 | };
20 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/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 |
16 |
{_package.name}
17 | {_package.description}
18 |
23 |
24 | );
25 | }
26 | });
27 |
28 | ReactDOM.render(, document.getElementById('app'));
29 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | react-videojs
9 |
10 |
11 | 
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | var assign = require('object-assign');
2 | var cx = require('classnames');
3 | var blacklist = require('blacklist');
4 | var React = require('react');
5 |
6 | module.exports = React.createClass({
7 | displayName: 'VideoJS',
8 |
9 | componentDidMount() {
10 | var self = this;
11 | var player = videojs(this.refs.video, this.props.options).ready(function() {
12 | self.player = this
13 | self.player.on('play', self.handlePlay);
14 | });
15 | if(this.props.onPlayerInit) this.props.onPlayerInit(player);
16 | },
17 |
18 | handlePlay: function() {
19 | if(this.props.onPlay) this.props.onPlay(this.player);
20 | },
21 |
22 | render() {
23 | var props = blacklist(this.props, 'children', 'className', 'src', 'type', 'onPlay', 'onPlayerInit');
24 | props.className = cx(this.props.className, 'videojs', 'video-js vjs-default-skin');
25 |
26 | assign(props, {
27 | ref: 'video',
28 | controls: true
29 | });
30 |
31 | return (
32 |
33 |
36 |
37 | )
38 | }
39 | });
40 |
--------------------------------------------------------------------------------
/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 | });
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-videojs",
3 | "version": "0.0.3",
4 | "description": "react videojs wrapper",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "webpack-dev-server -c --port=7788",
8 | "build": "babel src --out-dir dist && webpack -p",
9 | "deploy": "npm run build && github-pages-deploy",
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "github-pages-deploy": {
13 | "src": "example"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/esportsguy/react-videojs.git"
18 | },
19 | "peerDependencies": {
20 | "react": "^0.14.0",
21 | "react-dom": "^0.14.0"
22 | },
23 | "keywords": [
24 | "react-component",
25 | "videojs",
26 | "video",
27 | "react"
28 | ],
29 | "author": "Wang Zuo",
30 | "license": "ISC",
31 | "bugs": {
32 | "url": "https://github.com/esportsguy/react-videojs/issues"
33 | },
34 | "homepage": "https://github.com/esportsguy/react-videojs#readme",
35 | "dependencies": {
36 | "blacklist": "^1.1.2",
37 | "classnames": "^2.2.0",
38 | "object-assign": "^4.0.1"
39 | },
40 | "devDependencies": {
41 | "babel-core": "^6.2.1",
42 | "babel-loader": "^6.2.0",
43 | "babel-preset-es2015": "^6.1.18",
44 | "babel-preset-react": "^6.1.18",
45 | "github-pages-deploy": "0.0.3",
46 | "json-loader": "^0.5.3",
47 | "webpack": "^1.12.8"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
