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.
npm install --save videojs-contextmenu
The plugin is invoked as a method of a video.js
After the plugin is invoked, you can listen to the
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 may be passed to the plugin in a plain object:
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.
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.
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.
If set to true, this option will disable firing
vjs-contextmenu. Functionality can be restored at any time by setting disabled to false.
To include videojs-contextmenu on your website or web application, use any of the following methods.
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.
When using with Browserify, install videojs-contextmenu via npm and
require the plugin as you would any other module.
var videojs = ;// 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.;var player = ;player;
When using with RequireJS (or another AMD library), get the script in whatever way you prefer and
require the plugin as you normally would:
Apache-2.0. Copyright (c) Brightcove, Inc.