videojs-shuttle-controls

Adds shuttle controls(JKL controls) to video.js Live Demo

Table of Contents

• Installation
• Usage
  • <script> Tag
  • Browserify/CommonJS
  • RequireJS/AMD
  • ES6
• Options
• License

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'],
    inKey               : ['i'],
    outKey              : ['o'],
    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'],
  inKey             : ['i'],
  outKey            : ['o'],
  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'],
    inKey               : ['i'],
    outKey              : ['o'],
    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'],
  inKey             : ['i'],
  outKey            : ['o'],
  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'])
• inKey (array of string): The keys to confirm the in point of loop
• outKey (array of string): The keys to confirm the out point of loop
• 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 <[email protected]>