react-videojs-wrapper
React wrapper for VideoJS
Install
npm install --save react-videojs-wrapper
Usage
;; player = {}; state = video: src: 'http://www.example.com/path/to/video.mp4' poster: 'http://www.example.com/path/to/video_poster.jpg' ; { console; thisplayer = player; } { console; } { console; } { console; } { console; } { console; } { console; } { return <div> <VideoPlayer controls=true src=thisstatevideosrc poster=thisstatevideoposter width='720' height='420' onReady=thisonPlayerReady onPlay=thisonVideoPlay onPause=thisonVideoPause onTimeUpdate=thisonVideoTimeUpdate onSeeking=thisonVideoSeeking onSeeked=thisonVideoSeeked onEnd=thisonVideoEnd /> </div> ; };
Providing video sources
Sources can be provided via the src
function on the instance of a video.js
player.
player.src()
Using player;
VideoJS APIs support:
onReady will return
videojs
instance. Which means you can use all the APIs provided by VideoJS.
List of VideoJS APIs
VideoJS plugins support:
Since most of the VideoJS plugins needs
videojs
instance to get initialized, it is very easy to integrate any of the available plugins by making use ofvideojs
instance returnd by onReady event.
List of VideoJS plugins
Available Props:
Prop Name | Prop Type | Default Value | Description |
---|---|---|---|
src | string |
"" |
Video file path |
poster | string |
"" |
Video poster file path |
width | string | number |
auto |
Video player width |
height | string | number |
auto |
Video player height |
controls | boolean |
true |
Video player control bar toggle |
autoplay | boolean |
false |
Video will start playing automatically if true |
preload | string |
auto |
video tag preload attribute |
playbackRates | array |
[0.5, 1, 1.5, 2] |
Video speed control |
hideControls | array |
[] |
List of controls to hide. ['play','volume','seekbar','timer','playbackrates','fullscreen'] |
bigPlayButton | boolean |
true |
Big play button visibility toggle |
bigPlayButtonCentered | boolean |
true |
Big play button center position toggle |
className | string |
"" |
Video player wrapper class. It can be used for custom player skin. |
Video tracking props:
Method Name | Description |
---|---|
onReady | It will fire when video player is ready to be used. It returns videojs instance. |
onPlay | It will fire when video starts playing anytime. It returns current time of the video |
onPause | It will fire when video is paused. It returns current time of the video |
onTimeUpdate | It keeps firing while video is in playing state. It returns current time of the video |
onSeeking | It will fire when video is beeing seeked using seekbar. It returns current time of the video |
onSeeked | It will fire after seeking is done. It returns seek start time and seek end time for the video. |
onEnd | It will fire when video is finished playing. |