videojs-contextmenu-ui
A cross-device context menu UI for video.js players.
Note: Versions 4.x and lower of this plugin depended on the videojs-contextmenu plugin, but that plugin is not included with it. It must be included separately.
Versions 5.x and newer does not use the videojs-contextmenu plugin, so do not include it. Versions 5.x and newer rely on the native
contextmenu
event.
Maintenance Status: Stable
Installation
npm install --save videojs-contextmenu-ui
Usage
The plugin is invoked as a method of a video.js Player
object:
player;
Once the plugin is invoked, a modal will appear with a list of links when the contextmenu
event is triggered on the Player
object.
Options
Options may be passed to the plugin in a plain object:
player;
content
Required Type: Array
The plugin requires that content
be passed as an array. If it is not, an error will be thrown. The array should contain any number of objects which define a series of links that appear in the modal. These objects support the following properties:
href
: Defines the value of thehref
attribute of the generated link.listener
: A function which will be bound to theclick
event of the generated link.label
: Text for the link.
keepInside
Type: Boolean
If true
(default), the context menu will be kept within the bounds of the player. If false
, it may extend outside. When set to false
, the menu would still stay within the player if the menu would otherwise extend outside the document body, including fullscreen players and players in an iframe.
Inclusion
To include videojs-contextmenu-ui 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.
CommonJS/Browserify
When using with Browserify, install videojs-contextmenu-ui 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;
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:
;
License
Apache-2.0. Copyright (c) Brightcove, Inc.