Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

videojs-shuttle-controls

1.1.1 • Public • Published

videojs-shuttle-controls

Adds shuttle controls(JKL controls) to video.js

Live demo

Table of Contents

Installation

npm install --save videojs-shuttle-controls

Usage

To include videojs-shuttle-controls 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-shuttle-controls.min.js"></script>
<script>
  var player = videojs('my-video', {
    playbackRates: [-10, -5, -2, -1, -0.5, 0.5, 1, 2, 5, 10]
  });
 
  player.shuttleControls({
    playPauseKeys : [' ', 'k'],
    backwardKeys  : ['j'],
    forwardKey    : ['l'],
    backwardFrameKey: ['ArrowLeft'],
    forwardFrameKey: ['ArrowRight'],
    shiftMagnification: 10,
    fps           : 30
  });
</script> 

Browserify/CommonJS

When using with Browserify, install videojs-shuttle-controls 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-shuttle-controls');
 
var player = videojs('my-video', {
  playbackRates: [-10, -5, -2, -1, -0.5, 0.5, 1, 2, 5, 10]
});
 
player.shuttleControls({
  playPauseKeys : [' ', 'k'],
  backwardKeys  : ['j'],
  forwardKey    : ['l'],
  backwardFrameKey: ['ArrowLeft'],
  forwardFrameKey: ['ArrowRight'],
  shiftMagnification: 10,
  fps           : 30
});

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-shuttle-controls'], function(videojs) {
  var player = videojs('my-video', {
    playbackRates: [-10, -5, -2, -1, -0.5, 0.5, 1, 2, 5, 10]
  });
 
  player.shuttleControls({
    playPauseKeys : [' ', 'k'],
    backwardKeys  : ['j'],
    forwardKey    : ['l'],
    backwardFrameKey: ['ArrowLeft'],
    forwardFrameKey: ['ArrowRight'],
    shiftMagnification: 10,
    fps           : 30
  });
  
});

ES6

import videojs from 'video.js'
import 'videojs-shuttle-controls'
 
const player = videojs('my-video', {
  playbackRates: [-10, -5, -2, -1, -0.5, 0.5, 1, 2, 5, 10]
});
 
player.shuttleControls({
  playPauseKeys : [' ', 'k'],
  backwardKeys  : ['j'],
  forwardKey    : ['l'],
  backwardFrameKey: ['ArrowLeft'],
  forwardFrameKey: ['ArrowRight'],
  shiftMagnification: 10,
  fps           : 30
});

Options

  • playPauseKeys (array of string): The keys to toggle between play and pause (default: [' ', 'k'])

  • backwardKeys (array of string): The keys to play backward (default: ['j'])

  • forwardKey (array of string): The keys to play forward (default: ['l'])

  • backwardFrameKey (array of string): The keys to step backward (default: ['ArrowLeft'])

  • forwardFrameKey (array of string): The keys to step forward (default: ['ArrowRight'])

  • shiftMagnification (number): The step magnification when using shift key (default: 10)

  • fps (number): The video frame rate (default: 30)

  • playbackRates (array of number): Set playbackRates. If you want to display in the control bar, set it to the player's playbackRates instead of here. (default: [-10, -5, -2, -1, -0.5, 0.5, 1, 2, 5, 10])

License

MIT. Copyright (c) sweetberry <pixel@sweetberry.com>

Install

npm i videojs-shuttle-controls

DownloadsWeekly Downloads

0

Version

1.1.1

License

MIT

Unpacked Size

4.32 MB

Total Files

70

Last publish

Collaborators

  • avatar