The J1 Template integrates the VideoJS library as a module. The module consists of a few building blocks that work together. You do not need to know all details to use the player, but it helps to know what each part is for:

Puts the player in fluid mode and the value is used when calculating the dynamic size of the player. The value should represent a ratio - two numbers separated by a colon (e.g. "16:9" or "4:3").

Alternatively, the vjs- classes vjs-16-9, vjs-9-16, vjs-4-3 or vjs-1-1 can be added to the player.

If set audioOnlyMode to true, it asynchronously hides all player components except the control bar, as well as any specific controls that are needed only for video. This option can be set to true or false by calling the audioOnlyMode method audioOnlyMode([true|false]) at runtime. When used as a setter, it returns a Promise. When used as a getter, it returns a Boolean.

If set audioPosterMode to true, it enables the poster viewer experience by hiding the video element and displaying the poster image persistently. This option can be set to true or false by calling the audioPosterMode method audioPosterMode([true|false]) at runtime.

Prevents the player from running the autoSetup for media elements with the data-setup attribute.

When used with the responsive option, sets breakpoints that will configure how class names are toggled on the player to adjust the UI based on the player’s dimensions.

By default, the breakpoints are:

While the class names cannot be changed, the width ranges can be configured via an object like this:

When the player’s size changes, the merged breakpoints will be inspected in the size order until a matching breakpoint is found.

That breakpoint’s associated class name will be added as a class to the player. The previous breakpoint’s class will be removed.

See the file sandbox/responsive.html.example for an example of a responsive player using the default breakpoints.

The children option controls which child components the player creates and in what order. Because the player itself is a component, this option is available on the player as well. You can pass an array of component names, or an object to pass individual options down to each child component. In most cases the default set of children is what you want; change this option only if you need to remove or reorder controls.

If disablePictureInPicture is set to true, switching the video element into picture-in-picture is disabled. The default value is false.

This has no effect on Firefox, which implements a proprietary picture-in-picture mode which does not implement the standard picture-in-picture API.

This does not disable the document picture-in-picture mode which allows the player element to put into a PiP window.

If enableDocumentPictureInPicture is set to true, the documentPictureInPicture API will be used for picture-in-picture, if available. Defaults to false, but may default to true when the feature has become established.

Currently this is available in Chrome 111+ as an origin trial.

This is a different picture-in-picture mode than has previously been available, where the entire player element is windowed rather than just the video itself. Since there are scenarios where it would be desirable to allow PiP on the player but not PiP on the video alone (such as ads, overlays), the disablePictureInPicture option only disables the old-style picture-in-picture mode on the video.

If set experimentalSvgIcons to true, the icons used throughout the player from videojs/font will be replaced by SVGs stored in VideoJS. Defaults to false, but may default to true when the feature has become established.

These SVGs were downloaded from Font Awesome and Google’s Material UI.

You can view all of the icons available by renaming sandbox svg-icons example to sandbox/svg-icons.html, building VideoJS with the npm run build command, and opening sandbox/svg-icons.html in your browser of choice.

Icons are expected to be added to a component inside of the player using the setIcon method when customizing the player.

When fluid is set to true, the VideoJS player will have a fluid size. In other words, it will scale to fit its container at the video’s intrinsic aspect ratio, or at a specified aspectRatio.

Also, if the video tag <video> element has the class vjs-fluid, this option is automatically set to true.

The object fullscreen.options can be set to pass in specific fullscreen options. At some point, it will be augmented with element and handler for more functionality.

See the Fullscreen API Spec for more details.

VideoJS indicates that the user is interacting with the player by way of the classes vjs-user-active and vjs-user-inactive and the event useractive.

The attribute inactivityTimeout determines how many milliseconds of inactivity is required before declaring the user inactive. A value of 0 indicates that there is no inactivityTimeout and the user will never be considered inactive.

A language code matching one of the available languages in the player. This sets the initial language for a player, but it can always be changed.

Learn more about languages in VideoJS.

Customize which languages are available in a player. The keys of this object will be language codes and the values will be objects with English keys and translated values.

Learn more about languages in VideoJS.

Allows the player to use the new live ui that includes:

Without this option the progress bar will be hidden and in its place will be text that indicates a LIVE playback. There will be no progress control and you will not be able click the text to seek to the live edge.

An option for the liveTracker component of the player that controls when the liveui should be shown. By default if a stream has less than 20s on the seekBar then we do not show the new liveui even with the liveui option set.

An option for the liveTracker component of the player that controls how far from the seekable end should be considered live playback. By default anything further than 15s from the live seekable edge is considered behind live and everything else is considered live. Any user interaction to seek backwards will ignore this value as a user would expect.

Explicitly set a default value for the associated tech option.

Specify whether setting autoplay to true and the video element <video autoplay> should be treated the same as autoplay: 'play', i.e. the autoplay attribute should be removed from (or not added to) the video element and play method play() be initiated manually by VideoJS rather than the browser.

Allows overriding the default message that is displayed when VideoJS cannot play back a media source.

Control whether UI elements have a title attribute. A title attribute is shown on mouse hover, which can be helpful for usability, but has drawbacks for accessibility. Setting the attribute noUITitleAttributes to true prevents the title attribute from being added to UI elements, allowing for more accessible tooltips to be added to controls by a plugin or external framework.

An array of numbers strictly greater than 0, where 1 means regular speed (100%), 0.5 means half-speed (50%), 2 means double-speed (200%), etc. If specified, VideoJS displays a control (of the class vjs-playback-rate vjs-playback-rate) allowing the user to choose playback speed from among the array of choices. The choices are presented in the specified order from bottom to top.

For example:

This supports having plugins be initialized automatically with custom options when the player is initialized - rather than requiring you to initialize them manually.

The above is roughly equivalent to:

See the Plugins Guide for more information on VideoJS plugins.

Setting this to true will change fullscreen behaviour on devices which do not support the HTML5 fullscreen API but do support fullscreen on the video element, i.e. iPhone. Instead of making the video fullscreen, the player will be stretched to fill the browser window.

Setting this option to true will cause the player to customize itself based on responsive breakpoints. Find more on the breakpoints option.

When this option is false (the default), responsive breakpoints will be ignored.

If set restoreEl to true, a copy of the placeholder element will be made before the player is initalised. If the player is disposed, the copy is put back into the DOM in the player’s place.

If specified, VideoJS displays a control allowing the user to jump forward|backward in a video by a specified number of seconds.

See below skipButtons.forward or skipButtons.backward for more details.

An array of objects that mirror the native video element’s <video> capability to have a series of child source elements <source>. This should be an array of objects with the src and type properties.

For example:

Using source elements <source> will have the same effect:

If set suppressNotSupportedError to true, then the no compatible source error will not be triggered immediately and instead will occur on the first user interaction. This is useful for Google’s mobile friendly test tool, which can’t play video but where you might not want to see an error displayed.

Gives the possibility to techs to override the player’s poster and integrate into the player’s poster life-cycle. This can be useful when multiple techs are used and each has to set their own poster any time a new source is played.

Defines the order in which VideoJS techs are preferred. By default, this means that the Html5 tech is preferred. Other registered techs will be added after this tech in the order in which they are registered.

Configure handlers to call on specific events.

Allows overriding the default URL to vtt.js, which may be loaded asynchronously to polyfill support for WebVTT.

This option will be used in the "novtt" build of VideoJS (i.e. video.novtt.js). Otherwise, vtt.js is bundled with VideoJS.

If an Array — which is the default — this is used to determine which children (by component name) and in which order they are created on a player (or other component).

The children options can also be passed as an object. In this case, it is used to provide options for any/all children, including disabling them with false.

Components can be given custom options via the lower-camel-case variant of the component name (e.g. controlBar for ControlBar). These can be nested in a representation of grandchild relationships. For example, to disable the fullscreen control:

For VideoJS, playback technologies can be given as custom options as a part of the options passed to the videojs function or the video HTML element video. They should be passed under the lower-case variant of a tech name like html5.

Example:

Tech option for (native) HTML5 videos.

Add a remote text track.

Add a text track In addition to the W3C settings we allow adding additional info through options.

Get/Set the aspect ratio.

Get a TimeRange object with the times of the video that have been downloaded If you just want the percent of the video that’s been downloaded, use bufferedPercent.

Get the percent (as a decimal) of the video that’s been downloaded

0 means none, 1 means all. (This method isn’t in the HTML5 spec, but it’s very convenient)

Get or set whether or not the controls are showing.

Create the component’s DOM element.

Returns the fully qualified URL of the current source value e.g. //mysite.com/video.mp4 Can be used in conjuction with currentType to assist in rebuilding the current source object.

Get or set the current time (in seconds).

Get the current source type e.g. video/mp4 This can allow you rebuild the current source object so that you could load the same source and tech later

Get/set dimension for player.

Destroys the video player and does any necessary cleanup.

This is especially helpful if you are dynamically adding and removing videos to/from the DOM.

Get the length in time of the video in seconds.

Returns whether or not the player is in the "ended" state.

When fullscreen isn’t supported we can stretch the video container to as wide as the browser will let us.

Set or get the current MediaError.

Return the video to its normal size after having been in full screen mode.

Exit full window.

Add/remove the vjs-fluid class.

Check for call to either exit full window or full screen on ESC key.

Get object for cached values.

Get/set player height.

Player’s constructor function.

Checks if the player is in fullscreen mode.

The player’s language code NOTE: The language should be set in the player options if you want the the controls to be built with a specific language. Changing the lanugage later will not update controls text.

Get the player’s language dictionary Merge every time, because a newly added plugin might call videojs.addLanguage() at any time Languages specified directly in the player options have precedence

Begin loading the src data.

Get or set the loop attribute on the video element.

Get the current muted state, or turn mute on or off.

Returns the current state of network activity for the element, from the codes in the list below.

Pause the video playback.

Checks if the player is paused.

Start media playback.

Gets or sets the current playback rate. A playback rate of 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.

Get or set the poster image source url.

Get or set the preload attribute.

Returns a value that expresses the current state of the element with respect to rendering the current playback position, from the codes in the list below.

Calculates how much time is left.

Not a native video element function, but useful.

Get an array of remote html track elements.

Get an array of remote text tracks.

Report user activity.

Increase the size of the video to full screen.

In some browsers, full screen is not supported natively, so it enters "full window mode", where the video fills the browser window. In browsers and devices that support native full screen, sometimes the browser’s default controls will be shown, and not the Video.js custom skin. This includes most mobile devices (iOS, Android) and older versions of Safari.

Reset the player. Loads the first tech in the techOrder, and calls reset on the tech`.

Returns whether or not the user is "scrubbing". Scrubbing is when the user has clicked the progress bar handle and is dragging it along the progress bar.

Returns the TimeRanges of the media that are currently available for seeking to.

Returns whether or not the player is in the "seeking" state.

Select source based on tech-order or source-order Uses source-order selection if options.sourceOrder is truthy. Otherwise, defaults to tech-order selection.

The source function updates the video source There are three types of variables you can pass as the argument. URL String: A URL to the the video file. Use this method if you are sure the current playback technology (HTML5/Flash) can support the source you provide. Currently only MP4 files can be used in both HTML5 and Flash.

*Source Object (or element): * A javascript object containing information about the source file. Use this method if you want the player to determine if it can support the file using the type information.

*Array of Source Objects: * To provide multiple versions of the source so that it can be played using HTML5 across browsers you can use an array of source objects. Video.js will detect which version is supported and load that file.

Check to see if fullscreen is supported.

Return a reference to the current tech. It will only return a reference to the tech if given an object with the IWillNotUseThisInPlugins property on it. This is try and prevent misuse of techs by plugins.

Get an array of associated text tracks. captions, subtitles, chapters, descriptions.

Converts track info to JSON.

Update styles of the player element (height, width and aspect ratio).

Get/set if user is active.

Get video height.

Get video width.

Get or set the current volume of the media.

0 is off (muted), 1.0 is all the way up, 0.5 is half way.

Get/set player width.

Fired when video playback ends.

Fired when an error occurs.

Fired when the player has downloaded data at the current playback position.

Fired when the player has initial duration and dimension information.

Fired when the player is ready to use.

Fired when the current playback position has changed during playback. This is fired every 15-250 milliseconds, depending on the playback technology in use.

Fired when the user is active, e.g. moves the mouse over the player.

Fired when the user is inactive, e.g. a short delay after the last mouse move or control interaction.

Fired when the volume changes.

The adapter is a small piece of J1 JavaScript located at ~/assets/theme/j1/adapter/js/videojs.js. It is loaded on every page and does the following work for you:

You normally never call the adapter yourself. It is started automatically by the J1 core at page load.

Two YAML files control the VideoJS module:

The look of the player is defined by two stylesheets: