Options
There are three ways to pass options to Video.js. Because Video.js decorates an HTML5 <video> element, many of the options available are also available as standard <video> tag attributes:
1
<video controls autoplay preload="auto" ...>
Alternatively, you can use the data-setup attribute to pass options as JSON.
1
<video data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'...>
Finally, you can pass in an object of player options as the second argument to the videojs function:
1
2
3
4
5
videojs('my-player', {
controls: true,
autoplay: false,
preload: 'auto'
});
fluid
When true, the Video.js player will have a fluid size. In other words, it will scale to fit its container.
Also, if the <video> element has the "vjs-fluid", this option is automatically set to true.
Readiness
Because Video.js techs have the potential to be loaded asynchronously, it isn’t always safe to interact with a player immediately upon setup.
1
2
3
videojs('my-player', options, function() {
this.addClass('my-example');
});
1
2
3
player.ready(function() {
this.addClass('my-example');
});
1
2
3
player.on('ready', function() {
this.addClass('my-example');
});
Components
The default component structure of the Video.js player looks something like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Player
├── MediaLoader (has no DOM element)
├── PosterImage
├── TextTrackDisplay
├── LoadingSpinner
├── BigPlayButton
├── LiveTracker (has no DOM element)
├─┬ ControlBar
│ ├── PlayToggle
│ ├── VolumePanel
│ ├── CurrentTimeDisplay (hidden by default)
│ ├── TimeDivider (hidden by default)
│ ├── DurationDisplay (hidden by default)
│ ├─┬ ProgressControl (hidden during live playback, except when liveui: true)
│ │ └─┬ SeekBar
│ │ ├── LoadProgressBar
│ │ ├── MouseTimeDisplay
│ │ └── PlayProgressBar
│ ├── LiveDisplay (hidden during VOD playback)
│ ├── SeekToLive (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)
│ ├── SubsCapsButton (hidden, unless there are relevant tracks)
│ ├── AudioTrackButton (hidden, unless there are relevant tracks)
│ ├── PictureInPictureToggle
│ └── FullscreenToggle
├── ErrorDisplay (hidden, until there is an error)
├── TextTrackSettings
└── ResizeManager (hidden)
troubleshooting
If you have a modal that a player appears in, you should create the player when the modal pops up. When the modal hides, dispose the player.
HLS
1
2
3
4
5
6
7
8
9
10
11
12
13
<video id=example-video width=960 height=540 class="video-js vjs-default-skin" controls>
<source
src="https://example.com/index.m3u8"
type="application/x-mpegURL">
</video>
<script src="video.js"></script>
<script src="videojs.hls.min.js"></script>
<script>
var player = videojs('example-video');
player.play();
</script>