VideoJS Plugin · Enhance VJS Player

The J1 Template support playing audio on web pages by HTML5 Video, the new standard of HTML to show videos on webpages. Modern browsers support the audio tag <audio> for the new HTML5 audio audio standard.

VJS Plugins

The J1 Template provides a collection of plugins to enhance VJS players, such as by providing useful functions like additional buttons or advanced keyboard support to control a player by defined keys (hotkeys).

autoCaption

The plugin automatically enables the caption or subtitle track to match the player’s language best. The plugin name needs to be revised, as it has nothing to do with automatically generating captions. Language codes are considered case-insensitive. If one or more tracks have a kind of captions or subtitles with an exactly matching language code, the first will be selected.

If there is no exact match, the first captions or subtitles track where the first part of the language code matches is selected, so en-US would match en or en-gb. If there is no match based on language, the first captions or subtitles track with default = true will be selected.

The player language itself is either explicitly set as an option or is derived from the closest element with a lang attribute. See Video.js docs.

hotKeys

The hotkeys plugin for Video.js enables keyboard hotkeys when the player has focus.

Table 1. Hotkey Assignments
Key	Description
`Space bar`	Toggles play and pause
`M` key	Toggles mute and unmute
`F` key	Toggles fullscreen off and on
`Left\|Right Arrow` keys	Seek the video back and forth the seekstep configured
`Up\|Down Arrow` keys	Increase and decrease the volume
`Number 1-9` keys	Keys from 1-9 seek the video to a percentage of: `1` is `10%` and `9` is `90%`

Clicking any of the control buttons such as Play/Pause, Fullscreen, or Mute, will remove focus on the player which appears to break the hotkeys.

This is for accessibility reasons so that people who do not use or know about the hotkeys can still properly use the Tab key to highlight the control buttons and press space to toggle them.

To restore focus, just click on the video, or an empty part of the control bar at the bottom of the video player. To override this behaviour, set the flag alwaysCaptureHotkeys to true. This will fix hotkeys. For accessibility, the Tab key may be used in combination with the Enter|Return key to navigate and activate control buttons.

Options

Aut repudiandae eligendi ullam. Nulla fugiat commodi officiis ratione omnis fugit et voluptatem voluptatem impedit doloremque sunt. Ut voluptatem autem eum architecto dolores consequatur illo adipisci nihil. Numquam enim impedit numquam. Est consequuntur voluptatibus odit labore blanditiis eius.

Table 2. Plugin Options
Option	Type\|Default	Description
`volumeStep`	decimal\|`0.1`	The percentage to increase or decrease the volume level when using the Up and Down Arrow keys.
`seekStep` (value)	integer\|`5`	The number of seconds to seek forward and backwards when using the Right and Left Arrow keys, or a function that generates an integer given the `KeyboardEvent`.
`seekStep` (function)	function	The number of seconds to seek forward and backwards when using a function that generates an integer given on the `KeyboardEvent`.
`enableMute`	boolean\|`true`	Enables the volume mute to be toggle by pressing the M key.
`enableVolumeScroll`	boolean\|`true`	Enables increasing or decreasing the volume by scrolling the mouse wheel over the volume button (in the control bar).
`enableHoverScroll`	boolean\|`false`	Only changes volume when the mouse is hovering over the volume control elements. This works in connection with `enableVolumeScroll`.
`enableFullscreen`	boolean\|`true`	Enables toggling the video fullscreen by pressing the F key.
`enableNumbers`	boolean\|`true`	Enables seeking the video by pressing the number keys.
`enableModifiersForNumbers`	boolean\|`true`	Enables the use of `Ctrl\|Alt\|Cmd` + `Number keys` for skipping around in the video. This is enabled by default due to backwardscompatibility.
`alwaysCaptureHotkeys`	boolean\|`false`	Forces the capture of hotkeys, even when control elements are focused.
`enableInactiveFocus`	boolean\|`true`	This reassigns focus to the player when the control bar fades out after a user has clicked a button on thecontrol bar.
`skipInitialFocus`	boolean\|`false`	This stops focusing the player on initial Play under unique autoplay situations. + More information with Issue #44
`captureDocumentHotkeys`	boolean\|`false`	Capture document keydown events to also use hotkeys even if the player does not have focus. If you enable this option, you must configure `hotkeysFocusElementFilter`.
`hotkeysFocusElementFilter`	function\|`() ⇒ false`	Filter function to capture document hotkeys (if `captureDocumentHotkeys` is enabled) depending on the current focused element. For example, if you want to capture hotkeys when the player is not focused and avoid conflicts when the user is focusing a particular link: `hotkeysFocusElementFilter: e ⇒ e.tagName.toLowerCase() === 'body'`.
`enableJogStyle`	boolean\|`false`	Enables seeking the video in a broadcast-style jog by pressing the Up and Down Arrow keys.

The Enter|Return key may be used instead to activate the control elements (default: false).

This feature may break accessibility, and cause unexpected behavior.

seekStep will also need to be changed to get a proper broadcast-style jog. This feature and the changes for seekStep are explained a bit more in [PR #12](https://github.com/ctd1500/videojs-hotkeys/pull/12) Defaults to false.

This isn’t a feature for everyone, and enabling JogStyle will disable the volume hotkeys.

Template Defaults

Nesciunt necessitatibus adipisci voluptas corporis autem consequuntur dolorem laboriosam. Sed necessitatibus error natus quidem expedita porro aperiam eligendi voluptate enim officia eius consectetur. Vel corrupti minus tenetur illo quibusdam repellat et amet. At labore placeat iste repudiandae nihil tenetur. Adipisci quia in nemo praesentium enim quaerat natus nulla eaque officiis similique non quia.

Table 3. Template Defaults (hotKeys)
Option	Default
`enabled`	false
`seekStep`	15
`volumeStep`	0.1
`alwaysCaptureHotkeys`	true
`captureDocumentHotkeys`	false
`hotkeysFocusElementFilter`	function () { return false }
`enableFullscreen`	true
`enableHoverScroll`	true
`enableInactiveFocus`	false
`enableMute`	true
`enableNumbers`	false
`enableVolumeScroll`	true
`skipInitialFocus`	false

skipButtons

The plugin skipbuttons add VJS seek buttons to the control bar. These buttons allow the user to skip forward or back by a configured number of seconds.

Options

Aperiam aperiam quam odio alias itaque deserunt est pariatur nemo aut quibusdam non. Impedit eveniet consequatur voluptates minus error accusamus maxime beatae in. Magnam qui vero voluptatibus. Commodi unde molestiae in aliquid neque culpa quasi vel consequatur ipsam repudiandae provident eum repudiandae. Laborum consectetur consequatur quisquam earum assumenda expedita ullam impedit ex velit aut necessitatibus architecto.

Table 4. Plugin Options
Option	Type\|Default	Description
`forward`	integer\|10	If a number greater than 0, a seek forward button will be added which seeks that number of seconds.
`backward`	integer\|10	If a number greater than 0, a seek back button will be added which seeks that number of seconds.
`forwardIndex`	integer\1	Controls the position for the forward button to be inserted in the VJS player control bar.
`backwardIndex`	integer\1	Controls the position for the backward button to be inserted in the VJS player control bar.

Setting button positions

forwardIndex and backwardIndex control the posiiton of the button in the controlbar.

If both a backward and forward button are used, the forward button is inserted always first.

The play button for the VJS standard control bar is at index 0. With the default index of 1 for both, the forward button is inserted after the play button; then, the back button is inserted after the play button and before the forward button.

Setting backwardIndex to 0 and forwardIndex to 1 results in the buttons surrounding the play button by placing the backward button before the play button and the forward button after.

For the J1 template, a shorthand parameter surroundPlayButton is available to automaticly surround the play button with backward and forward buttons.

Template Defaults

Non vero omnis rem deleniti et. Aut est numquam quaerat nihil et ab quidem fugit nemo ut qui. Quae ipsa et maxime amet autem a voluptatem modi eos laboriosam perferendis perspiciatis. Ea vel optio iure enim error temporibus ea aspernatur neque qui qui ipsa quo veritatis. Dolorem ut inventore tempore quo nisi perferendis eveniet similique deleniti labore qui.

Table 5. Template Defaults (skipButtons)
Option	Default
`enabled`	false
`surroundPlayButton`	false
`backwardIndex`	1
`forwardIndex`	1
`forward`	10
`backward`	10

zoomButtons

Adds a zoom button to player controlbar.

Methods

Molestiae eligendi porro molestias qui fugiat iusto consequatur a blanditiis. Facere ea occaecati eos culpa et sit vero enim voluptate omnis consectetur sapiente perferendis. Quae alias est corrupti voluptatem. Animi quas fugiat quia consectetur iure laboriosam praesentium laboriosam. Dicta aut rem ea in nesciunt est illo impedit possimus quis.

zoom(value): void

Zoom function

value
type: Number

const zoomPlugin = video.zoomPlugin();
zoomPlugin.zoom(2);

rotate(value): void

Rotate function

value
type: Number in deg

const zoomPlugin = video.zoomPlugin();
zoomPlugin.rotate(180);

move(x, y): void

Rotate function

x
type: Number
y
type: Number

const zoomPlugin = video.zoomPlugin();
zoomPlugin.move(0, 0);
-----

toggle(): void

Open and close modal function

const zoomPlugin = video.zoomPlugin();
zoomPlugin.toggle();

flip(signal): void

Flip video image

x
type: String use + or - for flip image

const zoomPlugin = video.zoomPlugin();
zoomPlugin.flip("-");

Options

Example:

const zoomPlugin = video.zoomPlugin({
	showZoom: true,
	showMove: true,
	showRotate: true,
	gestureHandler: false
});

showZoom show/hide +- zoom buttons. default true
showMove show/hide up, left, right, reset and down buttons. default true
showRotate show/hide rotate and flip buttons. default true
gestureHandler enable gesture zoom drag and drop, wheel. default false

Events

Architecto reprehenderit est sequi necessitatibus ut ea neque est et porro optio. Officia ab a numquam quod. Voluptas ut modi quo hic enim. Est voluptas pariatur nemo. Tenetur quia a blanditiis qui corporis excepturi facilis harum iusto rem.

listen(event, callback): void

Listen events of the zoom plugin

event
type: String
options:
'change' when click in buttons modal
'click' when modal is opened or closed
callback
type: Function

const zoomPlugin = video.zoomPlugin();
zoomPlugin.listen('click', () => {
    console.log('click');
});