videojs-structure
This will update the default video structure, this is perfect when you need to work with react and need to add new component into the video plugin tag, you will have two components zones:
Header React Components Footer React Components
Default Component Tree
The default component structure of the Video.js player looks something like this:
Player├── MediaLoader (has no DOM element)├── PosterImage├── TextTrackDisplay├── LoadingSpinner├── BigPlayButton├─┬ ControlBar│ ├── PlayToggle│ ├── VolumeMenuButton│ ├── CurrentTimeDisplay (hidden by default)│ ├── TimeDivider (hidden by default)│ ├── DurationDisplay (hidden by default)│ ├─┬ ProgressControl (hidden during live playback)│ │ └─┬ SeekBar│ │ ├── LoadProgressBar│ │ ├── MouseTimeDisplay│ │ └── PlayProgressBar│ ├── LiveDisplay (hidden during VOD playback)│ ├── RemainingTimeDisplay│ ├── CustomControlSpacer (has no UI)│ ├── PlaybackRateMenuButton (hidden, unless playback tech supports rate changes)│ ├── ChaptersButton (hidden, unless there are relevant tracks)│ ├── DescriptionsButton (hidden, unless there are relevant tracks)│ ├── SubtitlesButton (hidden, unless there are relevant tracks)│ ├── CaptionsButton (hidden, unless there are relevant tracks)│ ├── AudioTrackButton (hidden, unless there are relevant tracks)│ └── FullscreenToggle├── ErrorDisplay (hidden, until there is an error)└── TextTrackSettings
The Update Component Tree
The new component structure of the Video.js player looks something like this:
Player├─┬ Header (Custom React Components)├─┬ New Wrapper with Custom Class (Name will be the customClass parameter into the object parameters)│ ├── MediaLoader (has no DOM element)│ ├── PosterImage│ ├── TextTrackDisplay│ ├── LoadingSpinner│ ├── BigPlayButton│ ├── ErrorDisplay (hidden, until there is an error)│ └── TextTrackSettings └── Custom React Components├─┬ ControlBar (only if option moveControl is true)│ ├── PlayToggle│ ├── VolumeMenuButton│ ├── CurrentTimeDisplay (hidden by default)│ ├── TimeDivider (hidden by default)│ ├── DurationDisplay (hidden by default)│ ├─┬ ProgressControl (hidden during live playback)│ │ └─┬ SeekBar│ │ ├── LoadProgressBar│ │ ├── MouseTimeDisplay│ │ └── PlayProgressBar│ ├── LiveDisplay (hidden during VOD playback)│ ├── RemainingTimeDisplay│ ├── CustomControlSpacer (has no UI)│ ├── PlaybackRateMenuButton (hidden, unless playback tech supports rate changes)│ ├── ChaptersButton (hidden, unless there are relevant tracks)│ ├── DescriptionsButton (hidden, unless there are relevant tracks)│ ├── SubtitlesButton (hidden, unless there are relevant tracks)│ ├── CaptionsButton (hidden, unless there are relevant tracks)│ ├── AudioTrackButton (hidden, unless there are relevant tracks)│ └── FullscreenToggle├─ Footer (Custom React Components)
Table of Contents
Installation
npm install --save videojs-structure
The npm installation is preferred, but Bower works, too.
bower install --save videojs-structure
Usage
To include videojs-structure on your website or web application, use any of the following methods.
<script>
Tag
This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs
global is available.
Options
You can pass the customClass name for the new wrap video and moveControl true to move the controls video to new parent. If you pass components like true will add a custom wrapper for your components like React or Angular.
Options List
customClass String : Will be the media wrapper header Bool : Header Zone footer Bool : Footer Zone
Browserify
When using with Browserify, install videojs-structure via npm and require
the plugin as you would any other module.
var videojs = ; // The actual plugin function is exported by this module, but it is also// attached to the `Player.prototype`; so, there is no need to assign it// to a variable.; var player = ; player;
RequireJS/AMD
When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require
the plugin as you normally would:
;
License
MIT. Copyright (c) Jairo Campos Vargas