├── .babelrc
├── .gitignore
├── README.md
├── build
    └── index.js
├── docs
    ├── bundle.js
    └── index.html
├── package-lock.json
├── package.json
├── src
    ├── Controls.json
    └── index.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["@babel/preset-env"],
3 |     "plugins": [
4 |         "transform-object-rest-spread",
5 |         "transform-react-jsx",
6 |         "@babel/plugin-proposal-class-properties"
7 |     ]
8 | }
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-video-js-player
  2 | React wrapper for VideoJS. [Live Demo](https://karan101292.github.io/react-video-js-player/)
  3 | 
  4 | ## Install
  5 | ```
  6 | npm install --save react-video-js-player
  7 | ```
  8 | 
  9 | ## Usage
 10 | ```javascript
 11 | import React, { Component } from 'react';
 12 | import VideoPlayer from 'react-video-js-player';
 13 | 
 14 | class VideoApp extends Component {
 15 |     player = {}
 16 |     state = {
 17 |         video: {
 18 |             src: "http://www.example.com/path/to/video.mp4",
 19 |             poster: "http://www.example.com/path/to/video_poster.jpg"
 20 |         }
 21 |     }
 22 | 
 23 |     onPlayerReady(player){
 24 |         console.log("Player is ready: ", player);
 25 |         this.player = player;
 26 |     }
 27 | 
 28 |     onVideoPlay(duration){
 29 |         console.log("Video played at: ", duration);
 30 |     }
 31 | 
 32 |     onVideoPause(duration){
 33 |         console.log("Video paused at: ", duration);
 34 |     }
 35 | 
 36 |     onVideoTimeUpdate(duration){
 37 |         console.log("Time updated: ", duration);
 38 |     }
 39 | 
 40 |     onVideoSeeking(duration){
 41 |         console.log("Video seeking: ", duration);
 42 |     }
 43 | 
 44 |     onVideoSeeked(from, to){
 45 |         console.log(`Video seeked from ${from} to ${to}`);
 46 |     }
 47 | 
 48 |     onVideoEnd(){
 49 |         console.log("Video ended");
 50 |     }
 51 | 
 52 |     render() {
 53 |         return (
 54 |             <div>
 55 |                 <VideoPlayer
 56 |                     controls={true}
 57 |                     src={this.state.video.src}
 58 |                     poster={this.state.video.poster}
 59 |                     width="720"
 60 |                     height="420"
 61 |                     onReady={this.onPlayerReady.bind(this)}
 62 |                     onPlay={this.onVideoPlay.bind(this)}
 63 |                     onPause={this.onVideoPause.bind(this)}
 64 |                     onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
 65 |                     onSeeking={this.onVideoSeeking.bind(this)}
 66 |                     onSeeked={this.onVideoSeeked.bind(this)}
 67 |                     onEnd={this.onVideoEnd.bind(this)}
 68 |                 />
 69 |             </div>
 70 |         );
 71 |     }
 72 | }
 73 | export default VideoApp;
 74 | ```
 75 | 
 76 | ### VideoJS APIs support:
 77 | > onReady will return <code>videojs</code> instance. Which means you can use all the APIs provided by VideoJS.<br/>[List of VideoJS APIs](https://docs.videojs.com/docs/api/player.html)
 78 | 
 79 | ### VideoJS plugins support:
 80 | > Since most of the VideoJS plugins needs <code>videojs</code> instance to get initialized, it is very easy to integrate any of the available plugins by making use of <code>videojs</code> instance returnd by onReady event.<br/>[List of VideoJS plugins](https://videojs.com/plugins/) 
 81 | 
 82 | ### Available Props:
 83 | <table> 
 84 |   <thead> 
 85 |     <tr>
 86 |       <th>Prop Name</th>
 87 |       <th>Prop Type</th>
 88 |       <th>Default Value</th>
 89 |       <th>Description</th>
 90 |     </tr> 
 91 |   </thead> 
 92 |   <tbody>
 93 |     <tr>
 94 |       <td>src</td>
 95 |       <td><code>string</code></td>
 96 |       <td><code>""</code></td>
 97 |       <td>Video file path</td>
 98 |     </tr>
 99 |     <tr>
100 |       <td>poster</td>
101 |       <td><code>string</code></td>
102 |       <td><code>""</code></td>
103 |       <td>Video poster file path</td>
104 |     </tr>
105 |     <tr>
106 |       <td>width</td>
107 |       <td><code>string | number</code></td>
108 |       <td><code>auto</code></td>
109 |       <td>Video player width</td>
110 |     </tr>
111 |     <tr>
112 |       <td>height</td>
113 |       <td><code>string | number</code></td>
114 |       <td><code>auto</code></td>
115 |       <td>Video player height</td>
116 |     </tr>
117 |     <tr>
118 |       <td>controls</td>
119 |       <td><code>boolean</code></td>
120 |       <td><code>true</code></td>
121 |       <td>Video player control bar toggle</td>
122 |     </tr>
123 |     <tr>
124 |       <td>autoplay</td>
125 |       <td><code>boolean</code></td>
126 |       <td><code>false</code></td>
127 |       <td>Video will start playing automatically if <code>true</code></td>
128 |     </tr>
129 |     <tr>
130 |       <td>preload</td>
131 |       <td><code>string</code></td>
132 |       <td><code>auto</code></td>
133 |       <td>video tag preload attribute</td>
134 |     </tr>
135 |     <tr>
136 |       <td>playbackRates</td>
137 |       <td><code>array</code></td>
138 |       <td><code>[0.5, 1, 1.5, 2]</code></td>
139 |       <td>Video speed control</td>
140 |     </tr>
141 |     <tr>
142 |       <td>hideControls</td>
143 |       <td><code>array</code></td>
144 |       <td><code>[]</code></td>
145 |       <td>List of controls to hide. <code>['play','volume','seekbar','timer','playbackrates','fullscreen']</code></td>
146 |     </tr>
147 |     <tr>
148 |       <td>bigPlayButton</td>
149 |       <td><code>boolean</code></td>
150 |       <td><code>true</code></td>
151 |       <td>Big play button visibility toggle</td>
152 |     </tr> 
153 |     <tr>
154 |       <td>bigPlayButtonCentered</td>
155 |       <td><code>boolean</code></td>
156 |       <td><code>true</code></td>
157 |       <td>Big play button center position toggle</td>
158 |     </tr> 
159 |     <tr>
160 |       <td>className</td>
161 |       <td><code>string</code></td>
162 |       <td><code>""</code></td>
163 |       <td>Video player wrapper class. It can be used for custom player skin.</td>
164 |     </tr>
165 |   </tbody> 
166 | </table>
167 | 
168 | ### Video tracking props:
169 | <table> 
170 |   <thead> 
171 |     <tr>
172 |       <th>Method Name</th>
173 |       <th>Description</th>
174 |     </tr> 
175 |   </thead> 
176 |   <tbody>
177 |     <tr>
178 |       <td>onReady</td>
179 |       <td>It will fire when video player is ready to be used. It returns <code>videojs</code> instance.</td>
180 |     </tr>
181 |     <tr>
182 |       <td>onPlay</td>
183 |       <td>It will fire when video starts playing anytime. It returns current time of the video</td>
184 |     </tr>
185 |     <tr>
186 |       <td>onPause</td>
187 |       <td>It will fire when video is paused. It returns current time of the video</td>
188 |     </tr>
189 |     <tr>
190 |       <td>onTimeUpdate</td>
191 |       <td>It keeps firing while video is in playing state. It returns current time of the video</td>
192 |     </tr>
193 |     <tr>
194 |       <td>onSeeking</td>
195 |       <td>It will fire when video is being seeked using seekbar. It returns current time of the video</td>
196 |     </tr>
197 |     <tr>
198 |       <td>onSeeked</td>
199 |       <td>It will fire after seeking is done. It returns seek start time and seek end time for the video.</td>
200 |     </tr>
201 |     <tr>
202 |       <td>onEnd</td>
203 |       <td>It will fire when video is finished playing.</td>
204 |     </tr>
205 |   </tbody>
206 | </table>
207 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |    <head>
 4 |       <meta charset="UTF-8">
 5 |       <title>My React App</title>
 6 |    </head>
 7 |    <body>
 8 |       <div id="root"></div>
 9 |       <script src="bundle.js"></script>
10 |    <script type="text/javascript" src="bundle.js"></script></body>
11 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-video-js-player",
 3 |   "version": "1.1.1",
 4 |   "description": "React wrapper for VideoJS",
 5 |   "homepage": "https://github.com/karan101292/react-video-js-player#readme",
 6 |   "repository": "https://github.com/karan101292/react-video-js-player",
 7 |   "main": "build/index.js",
 8 |   "scripts": {
 9 |     "start": "webpack --watch --mode development",
10 |     "build": "webpack --mode production"
11 |   },
12 |   "keywords": [
13 |     "react-video-js-player",
14 |     "react",
15 |     "videojs"
16 |   ],
17 |   "author": "Karan Bhutwala",
18 |   "license": "ISC",
19 |   "peerDependencies": {
20 |     "react": "^16.6.3"
21 |   },
22 |   "dependencies": {
23 |     "prop-types": "^15.6.2",
24 |     "react": "^16.6.3",
25 |     "webpack": "^4.26.1",
26 |     "video.js": "^7.4.1"
27 |   },
28 |   "devDependencies": {
29 |     "@babel/core": "^7.1.2",
30 |     "@babel/plugin-proposal-class-properties": "^7.1.0",
31 |     "@babel/preset-env": "^7.1.0",
32 |     "babel-loader": "^8.0.4",
33 |     "babel-plugin-transform-object-rest-spread": "^7.0.0-beta.3",
34 |     "babel-plugin-transform-react-jsx": "^6.24.1",
35 |     "css-loader": "^1.0.0",
36 |     "file-loader": "^2.0.0",
37 |     "image-webpack-loader": "^4.5.0",
38 |     "node-sass": "^4.9.4",
39 |     "sass-loader": "^7.1.0",
40 |     "style-loader": "^0.23.1",
41 |     "url-loader": "^1.1.2",
42 |     "webpack-cli": "^3.1.2"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/Controls.json:
--------------------------------------------------------------------------------
1 | {
2 |     "play": "playToggle",
3 |     "volume": "volumePanel",
4 |     "seekbar": "progressControl",
5 |     "timer": "remainingTimeDisplay",
6 |     "playbackrates": "playbackRateMenuButton",
7 |     "fullscreen": "fullscreenToggle"
8 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import Controls from './Controls.json';
  4 | import videojs from 'video.js';
  5 | import 'video.js/dist/video-js.css';
  6 | 
  7 | class VideoPlayer extends Component {
  8 |     playerId = `video-player-${(new Date) * 1}`
  9 |     player = {};
 10 |     componentDidMount() {
 11 |         this.init_player(this.props);
 12 |         this.init_player_events(this.props);
 13 |     }
 14 | 
 15 |     componentWillReceiveProps(nextProps){
 16 |         this.set_controls_visibility(this.player, nextProps.hideControls);
 17 |         if(this.props.src !== nextProps.src){
 18 |             this.init_player(nextProps);
 19 |         }
 20 |     }
 21 | 
 22 |     componentWillUnmount() {
 23 |         if (this.player) this.player.dispose();
 24 |     }
 25 | 
 26 |     init_player(props) {
 27 |         const playerOptions = this.generate_player_options(props);
 28 |         this.player = videojs(document.querySelector(`#${this.playerId}`), playerOptions);
 29 |         this.player.src(props.src)
 30 |         this.player.poster(props.poster)
 31 |         this.set_controls_visibility(this.player, props.hideControls);
 32 |     }
 33 | 
 34 |     generate_player_options(props){
 35 |         const playerOptions = {};
 36 |         playerOptions.controls = props.controls;
 37 |         playerOptions.autoplay = props.autoplay;
 38 |         playerOptions.preload = props.preload;
 39 |         playerOptions.width = props.width;
 40 |         playerOptions.height = props.height;
 41 |         playerOptions.bigPlayButton = props.bigPlayButton;
 42 |         const hidePlaybackRates = props.hidePlaybackRates || props.hideControls.includes('playbackrates');
 43 |         if (!hidePlaybackRates) playerOptions.playbackRates = props.playbackRates;
 44 |         return playerOptions;
 45 |     }
 46 | 
 47 |     set_controls_visibility(player, hidden_controls){
 48 |         Object.keys(Controls).map(x => { player.controlBar[Controls[x]].show() })
 49 |         hidden_controls.map(x => { player.controlBar[Controls[x]].hide() });
 50 |     }
 51 | 
 52 |     init_player_events(props) {
 53 |         let currentTime = 0;
 54 |         let previousTime = 0;
 55 |         let position = 0;
 56 | 
 57 |         this.player.ready(() => {
 58 |             props.onReady(this.player);
 59 |             window.player = this.player;
 60 |         });
 61 |         this.player.on('play', () => {
 62 |             props.onPlay(this.player.currentTime());
 63 |         });
 64 |         this.player.on('pause', () => {
 65 |             props.onPause(this.player.currentTime());
 66 |         });
 67 |         this.player.on('timeupdate', (e) => {
 68 |             props.onTimeUpdate(this.player.currentTime());
 69 |             previousTime = currentTime;
 70 |             currentTime = this.player.currentTime();
 71 |             if (previousTime < currentTime) {
 72 |                 position = previousTime;
 73 |                 previousTime = currentTime;
 74 |             }
 75 |         });
 76 |         this.player.on('seeking', () => {
 77 |             this.player.off('timeupdate', () => { });
 78 |             this.player.one('seeked', () => { });
 79 |             props.onSeeking(this.player.currentTime());
 80 |         });
 81 | 
 82 |         this.player.on('seeked', () => {
 83 |             let completeTime = Math.floor(this.player.currentTime());
 84 |             props.onSeeked(position, completeTime);
 85 |         });
 86 |         this.player.on('ended', () => {
 87 |             props.onEnd();
 88 |         });
 89 |     }
 90 | 
 91 |     render() {
 92 |         return (
 93 |             <video id={this.playerId} className={`video-js ${this.props.bigPlayButtonCentered? 'vjs-big-play-centered' : ''} ${this.props.className}`}></video>
 94 |         )
 95 |     }
 96 | }
 97 | 
 98 | VideoPlayer.propTypes = {
 99 |     src: PropTypes.string,
100 |     poster: PropTypes.string,
101 |     controls: PropTypes.bool,
102 |     autoplay: PropTypes.bool,
103 |     preload: PropTypes.oneOf(['auto', 'none', 'metadata']),
104 |     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
105 |     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
106 |     hideControls: PropTypes.arrayOf(PropTypes.string),
107 |     bigPlayButton: PropTypes.bool,
108 |     bigPlayButtonCentered: PropTypes.bool,
109 |     onReady: PropTypes.func,
110 |     onPlay: PropTypes.func,
111 |     onPause: PropTypes.func,
112 |     onTimeUpdate: PropTypes.func,
113 |     onSeeking: PropTypes.func,
114 |     onSeeked: PropTypes.func,
115 |     onEnd: PropTypes.func,
116 |     playbackRates: PropTypes.arrayOf(PropTypes.number),
117 |     hidePlaybackRates: PropTypes.bool,
118 |     className: PropTypes.string
119 | }
120 | 
121 | VideoPlayer.defaultProps = {
122 |     src: "",
123 |     poster: "",
124 |     controls: true,
125 |     autoplay: false,
126 |     preload: 'auto',
127 |     playbackRates: [0.5, 1, 1.5, 2],
128 |     hidePlaybackRates: false,
129 |     className: "",
130 |     hideControls: [],
131 |     bigPlayButton: true,
132 |     bigPlayButtonCentered: true,
133 |     onReady: () => { },
134 |     onPlay: () => { },
135 |     onPause: () => { },
136 |     onTimeUpdate: () => { },
137 |     onSeeking: () => { },
138 |     onSeeked: () => { },
139 |     onEnd: () => { }
140 | }
141 | 
142 | 
143 | export default VideoPlayer;


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | module.exports = {
 3 |   entry: './src/index.js',
 4 |   output: {
 5 |     path: path.resolve(__dirname, 'build'),
 6 |     filename: 'index.js',
 7 |     libraryTarget: 'commonjs2'
 8 |   },
 9 |   module: {
10 |     rules: [
11 |       {
12 |         test: /\.js$/,
13 |         include: path.resolve(__dirname, 'src'),
14 |         exclude: /(node_modules|bower_components)/,
15 |         use: {
16 |           loader: 'babel-loader',
17 |           options: {
18 |             presets: ['@babel/preset-env']
19 |           }
20 |         }
21 |       },
22 |       {
23 |         test: /\.css$/,
24 |         use: ['style-loader', 'css-loader']
25 |       },
26 |       {
27 |         test: /\.scss$/,
28 |         use: [ "style-loader", "css-loader", "sass-loader" ]
29 |       }
30 |     ]
31 |   },
32 |   externals: {
33 |     'react': 'commonjs react'
34 |   }
35 | };
36 | 


--------------------------------------------------------------------------------