Have ideas to improve npm?Join in the discussion! »

    videojs-overlay-buttons

    1.2.6 • Public • Published

    videojs-overlay-buttons

    Touch overlay for player

    How overlay looks like

    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 lockButton: true

    When lock button is clicked

    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 <68330291+hoangvu12@users.noreply.github.com>

    Install

    npm i videojs-overlay-buttons

    DownloadsWeekly Downloads

    69

    Version

    1.2.6

    License

    MIT

    Unpacked Size

    63 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar