VideoJS Plus is an extension and skin for video.js.
npm install videojs-plus
# or
yarn add videojs-plus- Just include the JS and CSS and use videojs normally
<html>
<head>
<link rel="stylesheet" href="videojs-plus.css" />
</head>
<body>
<video
id="example-video"
class="vjs-fluid"
poster="http://vjs.zencdn.net/v/oceans.png"
>
<source src="http://vjs.zencdn.net/v/oceans.mp4" />
</video>
</body>
<script src="http://vjs.zencdn.net/7.4.1/video.js"></script>
<script src="videojs-plus.umd.js"></script>
<script>
var player = videojs('example-video');
</script>
</html>
- Dimensions of controls
You can change the dimensions of controls/menu by changing thefont-sizeof.video-js. For example,
.video-js {
@media (min-width: 1440px) {
font-size: 18px;
}
@media (min-width: 1680px) {
font-size: 20px;
}
}- FindChild
A function that get player component.
For Example, you want to insert a button beforeSettingMenuButton.
const { parent, component, index } = player.findChild('SettingMenuButton')[0];
parent.addChild(new Button(player), {}, index);
// whithou findChild
const ControlBar = player.getChild('ControlBar');
const index = ControlBar.children_.indexOf('SettingMenuButton');
ControlBar.addChild(new Button(player), {}, index);
// or
videojs.getComponent('ControlBar').prototype.options_.children = [
//...
'Button',
'SettingMenuButton'
];- Autoplay
- Playlist
- Subtitles
- Quality
- Quality (HLS)
- Audio (HLS)
- FullWindow Toggle
- Electron Fullscreen Toggle
- Picture In Picture ( Experimental )
- Live ( Style plugins for live streaming )
- Unload
- language
You can change the language of setting/context by VideoJS language feature. For example
const language = "zh-hk";
videojs("example-video". {
language
})
videojs.addLanguage(language, {
Speed: "速度",
Normal: "正常"
});See Apache 2.0.