videojs-plus

An extension and skin for video.js

Usage no npm install needed!

<script type="module">
  import videojsPlus from 'https://cdn.skypack.dev/videojs-plus';
</script>

README

VideoJS Plus

VideoJS Plus is an extension and skin for video.js.

Base Usage

Demo

Advancaed Usage

An Electron frameless application

Installation

npm install videojs-plus
# or
yarn add videojs-plus

Usage

  • 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>

Examples In CodeSandbox


Features

  • Dimensions of controls
    You can change the dimensions of controls/menu by changing the font-size of .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 before SettingMenuButton.
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'
];

Plugins


Tips

const language = "zh-hk";

videojs("example-video". {
  language
})

videojs.addLanguage(language, {
  Speed: "速度",
  Normal: "正常"
});

License

See Apache 2.0.