Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

videojs-seek-buttons

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

videojs-seek-buttons

Plugin for video.js to add seek buttons to the control bar

  • 3.0.1
  • latest
  • latest7
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

videojs-seek-buttons

Plugin for video.js to add seek buttons to the control bar. These buttons allow the user to skip forward or back by a configured number of seconds.

Table of Contents

Installation

npm install video.js
npm install videojs-seek-buttons

Version 3.x requires video.js version 6.x or 7.x to be installed as a peer dependency (latest v7 is recommended).

Options

  • forward - if a number greater than 0, a seek forward button will be added which seeks that number of seconds
  • back - if a number greater than 0, a seek back button will be added which seeks that number of seconds
  • forwardIndex - the position in the control bar to insert the button. Defaults to 1. See note below.
  • backIndex - the position in the control bar to insert the button. Defaults to 1. See note below.

Control position

forwardIndex and backIndex set the posiiton of the button in the control bar. Note if both a back and forward button are used, the forward button is inserted first.

Assuming the standard control bar, the play button is at index 0. With the default index of 1 for both, the forward button is inserted after the play button, then the back button is inserted after the play button and before the forward button. Setting backIndex to 0 would place the back button before the play button instead, so they surround the play button.

Usage

To include videojs-seek-buttons on your website or web application, use any of the following methods to include the script.

You also need to include the plugin's CSS.

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

<link rel="stylesheet" href="//path/to/video-js.css">
<link rel="stylesheet" href="//path/to/videojs-seek-buttons.css">
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-seek-buttons.min.js"></script>
<script>
  var player = videojs('my-video');

  player.seekButtons({
    forward: 30,
    back: 10
  });


// You could alternatively include the plugin in the setup options, e.g.
// var player = videojs('my-video', {
//   plugins: {
//     seekButtons: {
//       forward: 30,
//       back: 10
//     }
//   }
// });

</script>

The dist versions will be available from services which host npm packages such as jsdelivr:

Browserify/CommonJS

When using with Browserify, install videojs-seek-buttons via npm and require the plugin as you would any other module. Make sure if using React to also include "videojs-seek-buttons/dist/videojs-seek-buttons.css", otherwise the icons will not appear in the control bar.

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-seek-buttons');

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

player.seekButtons({
    forward: 30,
    back: 10
  });

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-seek-buttons'], function(videojs) {
  var player = videojs('my-video');

  player.seekButtons({
    forward: 30,
    back: 10
  });
});

License

Apache-2.0. Copyright (c) mister-ben <git@misterben.me>

Keywords

FAQs

Package last updated on 18 Oct 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc