node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

videojs-contextmenu

videojs-contextmenu

A cross-device context menu implementation for video.js players.

Most desktop browsers support the DOM standard contextmenu event, but some mobile browsers, lacking a right mouse button, do not. This plugin will fire a custom vjs-contextmenu event when it sees a contextmenu event or after a long touch.

For purposes of this plugin, a long touch is defined as a single touch which is held for a customizable number of milliseconds. In the intervening time, the touch must not move except within a customizable sensitivity range.

Installation

npm install --save videojs-contextmenu

Usage

The plugin is invoked as a method of a video.js Player object:

player.contextmenu();

After the plugin is invoked, you can listen to the vjs-contextmenu event:

player.on('vjs-contextmenu', function() {
  alert('open a context menu!');
});

When using the videojs-contextmenu-ui plugin, you won't need to listen to this event at all (unless you want to perform additional tasks, of course).

Options

Options may be passed to the plugin in a plain object:

player.contextmenu({sensitivity: 15, wait: 1000});

cancel

Type: Boolean Default: true

This option will suppress the native contextmenu event if it is seen. This tends to be desirable because the point of this plugin is to normalize this event and the long touch equivalent.

sensitivity

Type: Number Default: 10

Only used for detection of a long touch. The maximum number of pixels a touch can move while waiting for a long touch detection. This value is inclusive; so, by default, if the finger moves by 10 pixels it may still count as a long touch.

wait

Type: Number Default: 500

Only used for detection of a long touch. The minimum number of milliseconds a touch must stay within the sensitivity range before it registers as a long touch.

disabled

Type: Boolean Default: false

If set to true, this option will disable firing vjs-contextmenu. Functionality can be restored at any time by setting disabled to false.

Inclusion

To include videojs-contextmenu 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-contextmenu.min.js"></script>
<script>
  var player = videojs('my-video');
 
  player.contextmenu();
</script> 

Browserify

When using with Browserify, install videojs-contextmenu 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-contextmenu');
 
var player = videojs('my-video');
 
player.contextmenu();

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

License

Apache-2.0. Copyright (c) Brightcove, Inc.