videojs-overlay-buttons

Touch overlay for player

Table of Contents

Installation

npm install --save videojs-overlay-buttons

Options

Default options

{
  seekLeft: {
    handleClick: () => {
      const time = Number(player.currentTime()) - 10;

      player.currentTime(time);
    },
    doubleTap: true,
  },
  play: {
    handleClick: () => {
      if (player.paused()) {
        player.play();
      } else {
        player.pause();
      }
    },
  },
  seekRight: {
    handleClick: () => {
      const time = Number(player.currentTime()) + 10;

      player.currentTime(time);
    },
    doubleTap: true,
  },
  lockButton: false
}

| Options | Type | Description | | ----------- | -------- | -------------------------------------------------------------------------------- | | handleClick | Function | This Function will be executed when the button is clicked | | doubleTap | Boolean | If the holder of the icon is double tapped, execute handleClick option | | lockButton | Boolean | Show lock button when true, will hide all buttons except lockButton when clicked |

Lock button

When lockButton is true

When lock button is clicked

This will hide all buttons (also control bar) except lock button

Available buttons

{
  previous: {},
  seekLeft: {},
  play: {},
  seekRight: {},
  next: {}
}

CDN

CSS

Add this to your head tag

<link
  rel="stylesheet"
  href="https://unpkg.com/videojs-overlay-buttons@latest/dist/videojs-overlay-buttons.css"
/>

JS

Add this to bottom your body tag

<script src="https://unpkg.com/videojs-overlay-buttons@latest/dist/videojs-overlay-buttons.min.js"></script>

Usage

To include videojs-overlay-buttons 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.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-overlay-buttons.min.js"></script>
<script>
  var player = videojs("my-video");

  player.touchOverlay(options);
</script>

Browserify/CommonJS

When using with Browserify, install videojs-overlay-buttons via npm and require the plugin as you would any other module.

var videojs = require("video.js");

// 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.
require("videojs-overlay-buttons");

var player = videojs("my-video");

player.touchOverlay(options);

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:

require(["video.js", "videojs-overlay-buttons"], function (videojs) {
  var player = videojs("my-video");

  player.touchOverlay(options);
});

License

MIT. Copyright (c) hoangvu12 <[email protected]>