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 secondsback
- if a number greater than 0, a seek back button will be added which seeks that number of secondsforwardIndex
- 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
});
</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');
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>