Nirvana Playing Madonna

    @adsignal/videojs-shuttle-controls

    1.2.4 • 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'],
        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 <pixel@sweetberry.com>

    Install

    npm i @adsignal/videojs-shuttle-controls

    DownloadsWeekly Downloads

    24

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    186 kB

    Total Files

    15

    Last publish

    Collaborators

    • adsignal