BigPauseButtons

This component dynamically adds specific control buttons when it detects a mobile device. The controls buttons include a large pause button and large skip forward/backward buttons.

• The component checks if the user is on a mobile device.
• The skip buttons are hidden when the video is paused or during live streaming.
• The large pause button is displayed when the video is playing.

Initialization

This button is enabled by default for the KWIKplayer theme and is only available in the KWIKplayer theme. If you want to add this button to another theme, you need to configure it in the options.

To do so, ensure that components responsible for big buttons are included in the player. You can specify this by setting children: ['bigPlayButton', 'bigPauseButtons'].

Note: This configuration will override the default list of children, so be sure to include all required components.

Additionally, custom CSS styles are necessary to ensure the button displays correctly in your chosen theme.

ContextMenu

The ContextMenu component is a custom video.js menu that replaces the default browser context menu when a user right-clicks on the video player. It displays a custom context menu with links and version information about KWIKmotion and KWIKplayer.

Initialization

The component is already set by default to show current KWIKplayer version

Custom Button

The CustomButton component is a highly customizable button for your player. It can be used in two ways:

• As a simple button that triggers a custom event.
• As a button with a menu, where each menu item can trigger its own event.

Configuration Options for

Configuration Options for

Example Configurations

Option 1: Simple Button

const player = window.kwikMotion('my-video', {
 ccbutton: {
 enabled: true,
 className: 'some-class test-class',
 controlText: 'Click Me',
 eventName: 'cclick',
 },
})

Option 2: Button with Menu

const player = window.kwikMotion('my-video', {
 ccbutton: {
 className: 'cass',
 controlText: 'click Me',
 eventName: 'click',
 menuItems: [
 {
 label: 'Option 1',
 eventName: 'menuOption1Click',
 },
 {
 label: 'Option 2',
 eventName: 'menuOption2Click',
 },
 ],
 },
})

ResumeModal

The ResumeModal component allows users to resume video playback from where they left off. It stores the current playback position using either localStorage or cookies, depending on their availability, and presents a modal with two options: "Resume watching" and "Watch from beginning." The modal automatically appears when metadata is loaded and a stored resume time is available, unless the user is manually seeking. If localStorage is unavailable, the component falls back to using cookies to store the resume position.

Initialization

const player = window.kwikMotion('my-video', {
 resumeModal: true
})

Share

The share button allows users to easily share the video by copying a link, sending it directly, or sharing via social media buttons. It also allows users to copy an embed link in an iframe format to insert on other websites.

The share button opens a modal window with pre-set options. This allows users to easily copy the link, send it, or create a post via social media buttons. It also allows users to copy the embed link to the video and insert it on any other website pasting <iframe> into the HTML.

Share modal window

The share modal window with buttons and inputs is opened by triggering sharing:open, and closed by triggering modalclose or beforemodalclose events. On opening the the share modal will trigger sharing:opened and on closing the modal window will trigger sharing:close or sharing:closed events.

Options

Options that Share component may receive:

{
 addButtonToControlBar?: boolean;
 buttonPositionIndex?: number;
 description?: string;
 embedCode?: string;
 fbAppId?: string;
 image?: string;
 mobileVerification?: boolean;
 redirectUri?: string;
 showEmbedCode?: boolean;
 socials?: ('viber'
 | 'reddit'
 | 'facebook'
 | 'messenger'
 | 'linkedin'
 | 'telegram'
 | 'twitter'
 | 'whatsapp'
 | 'email'
 | 'pinterest')[];
 title?: string;
 url?: string;
}

Option Descriptions

• url: The URL to be shared across social media platforms. By default, this is set to the current page URL.
• showEmbedCode: Enables the display of an input field with the embed code for the video.
• embedCode: Allows setting a custom iframe HTML snippet for embedding. If not provided, a default iframe code is generated based on the url:

  <iframe src='${url}' width='560' height='315' allowfullscreen></iframe>
  

• fbAppId (optional): The Facebook App ID, used only when integrating with Facebook’s SDK-based sharing (fbFeed from vanilla-sharing). This enables richer feed post customization, such as automatic metadata extraction and advanced analytics.

⚠️ Not required for basic Facebook sharing. If fbAppId is not provided, the component will fall back to using Facebook’s sharer dialog, which opens a popup allowing users to share the URL without needing any Facebook App.

• redirectUri: The URI Facebook will redirect to after sharing, defaulting to ${url}#close_window.
• mobileVerification: When set to true, filters out certain social platforms (whatsapp, viber, messenger) on non-mobile devices, ensuring these mobile-specific apps are only shown on mobile.
• socials: An array of enabled social platforms. Supported values include email, linkedin, messenger, reddit, telegram, twitter, viber, whatsapp, and facebook. This option allows for fine-grained control over which platforms are shown.
• image: A URL pointing to the image displayed in social media link previews.
• title: A string title used in social media link previews.
• description: A description of the content being shared, used for social media link previews.

Example usage

const player = window.kwikMotion('my-video', {
 shareOptions: {
 description: 'It is an implementation of the share button plugin on video.js framework',
 fbAppId: '123123123123',
 image: 'https://dummyimage.com/1200x630',
 mobileVerification: true,
 redirectUri: 'https://www.whitepeaks.co.uk/en/#close',
 showEmbedCode: true,
 socials: [
 'email',
 'linkedin',
 'messenger',
 'reddit',
 'telegram',
 'twitter',
 'viber',
 'whatsapp',
 'facebook'
 ],
 title: 'videojs-share component',
 url: 'https://www.whitepeaks.co.uk/en/'
 }
})

SoapButton

The SoapButton is a custom button in the Video.js player that opens a specialized SoapMenu for browsing series and episodes. The SoapMenu presenting them in a videojs menu. Users can navigate through the episodes, and the menu dynamically adjusts based on available content.

Initialization

To enable SoapButton need to add in following options:

controlBar: {
 soapButton: {
 xml: 'xml link' // Replace with the actual XML file URL
 }
}

XML Structure

<playlist>
 <title>Test Series</title>
 <seasons>
 <season>
 <title>Test Season 1</title>
 <episode>
 <title>Test Episode 1</title>
 <image>https://example.com/test-image.jpg</image>
 <description>Test Episode Description</description>
 <url>https://example.com/test-episode.mp4</url>
 <duration>10:00</duration>
 </episode>
 </season>
 </seasons>
</playlist>

• <playlist>: Root element for the content.
• <title>: Name of the series (used for the menu header).
• <seasons>: Wrapper for all seasons.
• <season>: Represents a single season and contains its episodes.
  • <title>: Name of the season.
    • <episode>: Contains details for each episode.
    • <title>: Name of the episode.
    • <image>: Thumbnail image for the episode.
    • <description>: Short description of the episode.
    • <url>: Link to the episode's video file.
    • <duration>: Duration of the episode in hh:mm:ss or mm:ss format.

Customization

You can style the SoapButton and SoapMenu using the following CSS classes:

Thumbnails

The Thumbnails component is a custom video.js enhancement that provides visual previews of video content as users interact with the progress bar. When a user hovers over different points in the video timeline, this component displays relevant thumbnail images that correspond to those timestamps. This functionality enables users to quickly navigate to specific scenes within the video, enhancing the overall user experience.

Metadata Requirements:

The video must include a metadata track with cues formatted according to the standard VTT specifications. Each cue should contain thumbnail information using the #xywh syntax.

Initialization

The component is already enabled by default, if source has tracks fields. Example of income source:

{
 sources: [
 {
 src: 'https://some.example.net/playlist.m3u8'
 }
 ],
 tracks: [
 {
 src: 'https://some.example.com/thumbs.vtt',
 kind: 'metadata'
 }
 ]
}

Video Quality Button

The button selector provides users with the ability to change the video quality dynamically based on available tracks.

Initialization

This button is enabled by default.

Dynamic Quality Selection

Displays a list of available video quality options based on the videoTracks() provided by the player.

VolumeManager

This component is responsible for persisting the volume and mute state of the video player. It utilizes localStorage to store user preferences. If localStorage is not available (e.g., due to privacy settings or browser limitations), the component will store the volume and mute state in cookies. If neither localStorage nor cookies are available, the component will dispose itself.

Initialization

The component is already set by default.

Airplay module

The Airplay module is designed to provide integration with Airplay devices enabling users to cast media content directly from their application to a Airplay receiver. It simplifies the process of establishing and managing casting sessions, offering developers a customizable and scalable solution for Airplay functionality.

Limitations

The module is incompatible with the Podcast module, Panorama module, or the Hotspots Editor module. Any of these configurations will prevent the module from functioning as intended. The module will be enabled only when the site uses the HTTPS protocol.

Options

Example

window.initPlayer('my-video', {
 airplayPlugin: {
 addButtonToControlBar: true,
 buttonPositionIndex: 16
 },
})

Chromecast module

The Chromecast module allows seamless casting of media directly to Chromecast devices, simplifying the process of establishing and managing casting sessions.

Features

• Automatic Session Management
  • Automatically closes inactive sessions after a timeout (e.g., when the video is paused or ends, and the user does not interact).
  • Automatically disposes of sessions when the player is destroyed (except during a page refresh).
• Customizable UI Integration
  • Provides a Cast button that can be added to the control bar.
  • Allows positioning of the Cast button within the control bar.

Limitations

The module is incompatible with the Podcast module, Panorama module, or the Hotspots Editor module. Any of these configurations will prevent the module from functioning as intended. Additionally, the module requires an HTTPS protocol to operate correctly. The module will be enabled only when the site uses the HTTPS protocol.

Options

Note: This property is ignored if addButtonToControlBar is set to false.

Example

window.initPlayer('my-video', {
 chromecastPlugin: {
 receiverAppID: '12345ABC',
 addButtonToControlBar: true,
 buttonPositionIndex: 16,
 },
})

Cue Points

The Cue Points module enables the addition of interactive cue points to a video player, allowing you mark important timestamps in the video.

How to Use

You can configure cue points programmatically by passing an object with the required options to the cuePointsPlugin.

Features

• Multiple Cue Point Types: Support for code execution and chapters
• Visual Progress Bar Markers: Display cue points as visual markers on the progress bar
• Customizable Appearance: Configure marker colors, sizes, and tooltips

Example usage

window.initPlayer('my-video', {
 cuePointsPlugin: {
 enabled: true,
 maxTriggerDistance: 0.5,
 markerHeight: 6,
 markerWidth: 6,
 markerOpacity: 1,
 initialCuePoints: [
 {
 id: 'chapter-1',
 time: 10,
 type: 'chapter',
 marker: {
 markerColor: '#4CAF50',
 markerTitle: 'Introduction',
 tooltipBackgroundColor: 'rgba(76, 175, 80, 0.9)',
 tooltipTextColor: 'white'
 }
 },
 {
 id: 'code-execution',
 time: 30,
 type: 'code',
 action: 'console.log("Code executed at 30 seconds"); player.pause(); setTimeout(() => player.play(), 2000);',
 marker: {
 markerColor: '#2196F3',
 markerTitle: 'Code Execution',
 tooltipBackgroundColor: 'rgba(33, 150, 243, 0.9)',
 tooltipTextColor: 'white'
 }
 }
 ]
 }
})

Configuration

Global Options

• enabled (boolean): Whether the cue points module is enabled (default: true)
• maxTriggerDistance (number): Maximum distance in seconds to trigger a cue point (default: 0.5)
• initialCuePoints (CuePointOptions): Array of initial cue points to add
• markerHeight (number): Height of progress bar markers in pixels (default: 6)
• markerWidth (number): Width of progress bar markers in pixels (default: 6)
• markerOpacity (number): Opacity of progress bar markers (default: 1)

Cue Point Configuration

Each cue point requires the following properties:

• id (string): Unique identifier for the cue point
• time (number): Time in seconds when the cue point should trigger
• type (CuePointType): Type of the cue point ('code' | 'chapter')
• enabled (boolean): Whether the cue point is enabled (default: true)
• action (string | function): Code to execute for 'code' type cue points
• marker (CuePointMarkerOptions): Visual marker options (optional)

Cue Point Types

Code Cue Points

Execute custom JavaScript code when triggered.

{
 id: 'code-example',
 time: 30,
 type: 'code',
 action: 'console.log("Code executed at 30 seconds"); player.pause(); setTimeout(() => player.play(), 2000);',
 marker: {
 markerColor: '#2196F3',
 markerTitle: 'Code Execution',
 tooltipBackgroundColor: 'rgba(33, 150, 243, 0.9)',
 tooltipTextColor: 'white'
 }
}

Chapter Cue Points

Mark chapters or sections in the video.

{
 id: 'chapter-1',
 time: 10,
 type: 'chapter',
 marker: {
 markerColor: '#4CAF50',
 markerTitle: 'Introduction',
 tooltipBackgroundColor: 'rgba(76, 175, 80, 0.9)',
 tooltipTextColor: 'white'
 }
}

Visual Marker Options

• markerColor (string): Color of the marker in the progress bar (default: '#ff6b6b')
• markerTitle (string): Title to display in the marker tooltip
• markerIcon (string): Icon to display in the marker (future feature)
• tooltipBackgroundColor (string): Background color of the tooltip (default: 'rgba(0, 0, 0, 0.8)')
• tooltipTextColor (string): Text color of the tooltip (default: 'white')

Events

The module triggers the following events:

• quepoint: Triggered when any cue point is activated
• quepoint:add: Triggered when a cue point is added
• quepoint:remove: Triggered when a cue point is removed
• quepoint:enable: Triggered when cue points are enabled
• quepoint:disable: Triggered when cue points are disabled
• quepoint:click: Triggered when a progress bar marker is clicked

API Methods

The module provides the following methods through the player instance:

// Add a cue point
player.cuePointsPlugin().addCuePoint({
 id: 'new-cue',
 time: 90,
 type: 'chapter',
 marker: {
 markerColor: '#E91E63',
 markerTitle: 'New Chapter'
 }
});

// Remove a cue point
player.cuePointsPlugin().removeCuePoint('new-cue');

// Get all cue points
const allCuePoints = player.cuePointsPlugin().getAllCuePoints();

// Get cue points by type
const chapters = player.cuePointsPlugin().getCuePointsByType('chapter');

// Enable/disable cue points
player.cuePointsPlugin().enable();
player.cuePointsPlugin().disable();

// Check if cue points are enabled
const isEnabled = player.cuePointsPlugin().isEnabled();

// Manually trigger a cue point by ID
player.cuePointsPlugin().triggerCuePointById('chapter-1', true); // force=true to trigger even if already triggered

// Clear triggered state for a specific cue point or all cue points
player.cuePointsPlugin().clearTriggeredState('chapter-1'); // Clear specific cue point
player.cuePointsPlugin().clearTriggeredState(); // Clear all cue points

Limitations

• Cue points are not compatible with live streams (duration === Infinity)
• Progress bar markers may not work correctly with custom progress bar implementations
• Code execution cue points should be used carefully to avoid performance issues

DASH

The DASH module enables DASH (Dynamic Adaptive Streaming over HTTP) playback in KWIKplayer using Shaka Player configurations.

Initialization

To enable DASH support need to add in following options:

window.initPlayer('my-video', {
 shakaConfig: {
 abr: { enabled: false },
 drm: {
 servers: {
 'com.widevine.alpha': 'https://license-server.example.com',
 },
 clearKeys: {
 'key-id': 'key-value',
 },
 },
 manifest: {
 retryParameters: { maxAttempts: 3 },
 },
 streaming: {
 bufferingGoal: 30,
 rebufferingGoal: 15,
 },
 licenseServerAuth: async (a, b, c) => {
 console.log('Custom license server logic');
 },
 },
})

Options

AbrConfiguration

DrmConfiguration

AdvancedDrmConfiguration

ManifestConfiguration

RetryParameters

StreamingConfiguration

RequestFilter

A function that processes a request before it is sent, allowing customization or filtering.

Design studio

This module allows users to customize the player's theme and add a custom logo. Users can modify the colors of the player's controls and progress bar, as well as set the logo's position, visibility, and link.

Features

• Custom logo: Add a logo to the player with options for hiding during playback, setting its position, adding a link, and adjusting margins.
• Theme customization: Change the primary, background, and progress bar colors for full control over the player’s appearance.

Limitations

The module is incompatible with the Podcast module. This will prevent the module from functioning as intended.

Initialization

window.initPlayer('my-video', {
 designStudioPlugin: {
 logo: {
 src: 'https://www.whitepeaks.co.uk/images/logo.webp',
 hide: true,
 link: 'https://www.whitepeaks.co.uk/en/',
 position: 'top-right',
 margin: 10,
 },
 colors: {
 primary: '#fff',
 highlight: 'red',
 background: '#2FA2FA',
 thumbContainerBg: '#2FA',
 playProgress: 'rgba(22,122,222, 50%)',
 loadProgress: '#000',
 progressHolder: '#999999',
 },
 },
})

Options

ModuleDesignStudio Options

Google Analytics

This plugin integrates Google Analytics and Google Tag Manager (gtag) with Video.js to enable tracking of video player events. It supports customizable event tracking, progress tracking, and debugging.

Initialization

To enable plugin need to add in following options:

window.initPlayer('my-video', {
 googleAnalyticsPlugin: {
 assetName: document.title,
 mode: 'GTAG',
 events: [
 {
 name: 'ended',
 label: 'video ended',
 action: 'ended',
 enabled: true,
 },
 {
 name: 'fullscreenchange',
 label: {
 open: 'video fullscreen open',
 exit: 'video fullscreen exit',
 },
 action: 'fullscreenchange',
 enabled: true,
 },
 ],
 },
})

Options

HLS

The HLS module enhances KWIKplayer by supporting HLS playback in browsers that lack native support (all except Safari).

Initialization

To enable HLS support need to add in following options:

window.initPlayer('my-video', {
 hlsPlugin: {
 hlsjsConfig: {
 levelSwitchStrategy: 'smooth'
 }
 }
})

Events

The HLS module triggers events for tracking playback and stream state:

• codecsknown - Fired when audio and video codecs are identified.

Options

HLS Tech Interface

Example: Accessing the Seekable Range

const tech = player.tech();
const seekable = tech.hls?.seekable();
if (seekable) {
 console.log('Seekable Start:', seekable.start(0));
 console.log('Seekable End:', seekable.end(0));
}

Hotspots

The Hotspots module enables the addition of interactive elements (hotspots) to a video player, allowing you to display custom content like text, images, HTML, and links at specific times and locations in the video. This is useful for creating engaging and interactive video experiences.

How to Use

You can customize the look and behavior of each hotspot in the Hotspots Editor module, or do it manually, passing the array of objects with needed options to the hotspotsPlugin.

Note: For an enhanced UI/UX, you can use the Hotspots Editor Module to visually configure hotspots. Alternatively, configure them programmatically as described below.

Limitations

The module is incompatible with the Podcast module, audio-only mode, or the audio tag. Any of these configurations will prevent the module from functioning as intended. When casting is enabled, the hotspots may not appear on the screen.

Example usage

window.initPlayer('my-video', {
 hotspotsPlugin: [
 {
 left: 0.8,
 top: 0.019,
 width: 0.112,
 height: 0.196,
 start: '1.46',
 end: '56.48',
 type: 'none',
 border: {
 size: 8,
 color: '#ffffff',
 style: 'solid',
 radius: 72,
 },
 ico: {
 size: 10,
 color: '#000000',
 icoType: 'hotspot',
 },
 },
 {
 left: 0.45,
 top: 0.1,
 width: 0.2,
 height: 0.102,
 start: '3',
 end: '5',
 type: 'text',
 text: 'Text hotspot',
 textProps: {
 size: 2.4,
 color: '#CAD6D7',
 font: 'Concert One',
 },
 },
 {
 left: 0.09,
 top: 0.01,
 width: 0.406,
 height: 0.974,
 start: '5',
 end: '20',
 type: 'html',
 html: '<div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 90%; max-width: 600px;">\n <h2 style="color: #333; text-align: center;">Key Features of KwikPlayer</h2>\n <ul style="list-style-type: none; padding: 0; margin: 0;">\n <li style="display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #e0e0e0;">\n <span style="font-size: 1.5rem; color: #4caf50; margin-right: 15px;">🚀</span>\n <span style="font-size: 1rem; color: #555;">Fast Loading Times</span>\n </li>\n <li style="display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #e0e0e0;">\n <span style="font-size: 1.5rem; color: #4caf50; margin-right: 15px;">⚙️</span>\n <span style="font-size: 1rem; color: #555;">Customizable Player Controls</span>\n </li>\n <li style="display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #e0e0e0;">\n <span style="font-size: 1.5rem; color: #4caf50; margin-right: 15px;">📱</span>\n <span style="font-size: 1rem; color: #555;">Responsive for Mobile Devices</span>\n </li>\n <li style="display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #e0e0e0;">\n <span style="font-size: 1.5rem; color: #4caf50; margin-right: 15px;">📈</span>\n <span style="font-size: 1rem; color: #555;">Analytics Integration</span>\n </li>\n <li style="display: flex; align-items: center; padding: 15px;">\n <span style="font-size: 1.5rem; color: #4caf50; margin-right: 15px;">🔒</span>\n <span style="font-size: 1rem; color: #555;">Privacy Controls and Security</span>\n </li>\n </ul>\n </div>',
 },
 ],
})

Configuration

Each hotspot configuration requires the following common properties:

• Positioning and Dimensions:
  • left (number): X-coordinate (relative, 0 to 1).
  • top (number): Y-coordinate (relative, 0 to 1).
  • width (number): Width of the hotspot (relative, 0 to 1).
  • height (number): Height of the hotspot (relative, 0 to 1).
• Timing:
  • start (string): Start time in seconds.
  • end (string): End time in seconds.
• Type-Specific Options: Custom properties based on the type of hotspot (e.g., text, html, link).

Hotspot Types and Examples

The module is written in TypeScript, ensuring type safety and enabling your IDE to assist with intelliSense. Once the type of a hotspot is specified, your IDE will suggest the available properties and their expected values, streamlining the configuration process.

HTML Hotspot

Displays custom HTML content at a specific position and time.

HTML Options:

• html (string): Custom HTML content to be displayed within the hotspot.
• title (string): Title text for the hotspot.

{
 type: 'html',
 html: '<div>Custom HTML Content</div>',
 title: 'HTML Hotspot',
 left: 0.1,
 top: 0.1,
 width: 0.2,
 height: 0.2,
 start: '5',
 end: '10',
}

Image Hotspot

Displays an image within the hotspot.

• src (string): URL of the image to display within the hotspot.

{
 type: 'image',
 src: 'https://www.kwikmotion.com/player/Images/KWIKplayer.png',
 left: 0.5,
 top: 0.2,
 width: 0.15,
 height: 0.15,
 start: '5',
 end: '15',
}

Link Hotspot

Creates a clickable area that opens a link.

• ico (HotspotIconOptions) - Icon settings to display an icon alongside the link.
• link (string) - URL that opens when the hotspot is clicked.
• title (string) - Title text for the hotspot.

{
 type: 'link',
 ico: { icoType: 'hotspot', size: 2.5, color: '#000' },
 link: 'https://www.whitepeaks.co.uk/en/',
 title: 'Clickable Link',
 left: 0.7,
 top: 0.1,
 width: 0.1,
 height: 0.1,
 start: '3',
 end: '12',
}

None Hotspot

Displays an icon without additional content or links.

• ico (HotspotIconOptions) - Icon settings to display an icon alongside the link.
• title (string) - Title text for the hotspot.

{
 type: 'none',
 ico: { icoType: 'aim', size: 1.5, color: '#ff0000' },
 title: 'Static Icon',
 left: 0.4,
 top: 0.4,
 width: 0.5,
 height: 0.5,
 start: '0',
 end: '20',
}

Page Hotspot

Opens a modal window containing an iframe when clicked.

• ico (HotspotIconOptions) - Icon settings to display an icon alongside the link.
• title (string) - Title text for the hotspot.
• link (string) - URL that opens modal window with iframe when clicked.

{
 type: 'page',
 ico: { icoType: 'point', size: 2.5, color: '#000' },
 link: 'https://www.whitepeaks.co.uk/en/',
 title: 'Embedded Page',
 left: 0.3,
 top: 0.3,
 width: 0.12,
 height: 0.12,
 start: '6',
 end: '18',
}

Text Hotspot

• text (string): Displayed text on the HotspotText component.
• textProps (HotspotTextPropsOptions): Text styling options.

{
 type: 'text',
 text: 'Sample Text',
 textProps: { color: '#333', font: 'Arial', size: 1.6 },
 left: 0.15,
 top: 0.15,
 width: 0.1,
 height: 0.1,
 start: '4',
 end: '8',
}

Advanced Options.

Text Options (textProps)

Customize text appearance for text hotspots.

• color (string): Text color (hex, RGB, or color name).
• font (string): Font family.
• size (number): Font size in em units.

Icon Options (ico)

Control the appearance of icons for specific hotspot types.

• size: number - The icon's width and height in pixels.
• color: string - Color in hex, RGB, or name format (only available for SVG icons).
• icoType: IcoType - Type of icon ('point', 'photo-camera', 'aim', 'disappointment', 'hotspot').

Border Options (border)

Control the appearance of icons for specific hotspot types.

• size: number - Border width in pixels.
• radius: number - Border radius for rounded edges, in pixels.
• color: string - Color of the border (hex, RGB, or color name).
• style: string - Border style (e.g., 'solid', 'dashed', 'dotted').

Hotspots Editor

The Hotspots Editor is an advanced module for the video.js framework that builds upon the Hotspots module, allowing users to not only display hotspots but also create, edit, and configure them dynamically within the video player. This module serves as an interactive extension, providing an intuitive interface for defining and modifying hotspot properties such as timing, position, size, and appearance.

Note: While the Hotspots module handles the display of hotspots, the Hotspots Editor enables their creation and editing. But it is not required enabling 2 modules at the same time.

Features

• Multiple hotspot types (up to six types of hotspots):
  • html
  • image
  • link
  • none
  • page
  • text
• Customizable appearance
  • Add borders to any hotspot type.
  • Set titles for page, html, none and link hotspots
  • Add icons to html, none and link hotspots
  • Choose from 13 different font families for text hotspots (modifiable in the code).
• Flexible configuration
  • Define any size and duration for each hotspot within the video player boundaries.
  • Use the valuehandler option to either pass a textarea element ID or a function to handle the hotspots array data.

Limitations

The module is incompatible with the Podcast module, audio-only mode, or the audio tag. Any of these configurations will prevent the module from functioning as intended.

Usage

Options example

To handle hotspot data, use the valuehandler option. This can either:

1. Link to a textarea element's ID to automatically update its content.
2. Provide a custom function for processing the hotspots array.

Example 1: Using a Custom Function The example below demonstrates how to dynamically create and populate a textarea element with the hotspot data:

window.initPlayer('my-video', {
 hotspotsEditorPlugin: {
 valuehandler: (hotspots) => {
 const textarea = document.querySelector('.hotspot-output') as HTMLTextAreaElement | undefined;

 if (textarea) {
 textarea.value = JSON.stringify(hotspots);
 return;
 }

 const main = document.querySelector('main');
 if (!main) return;

 const newTextarea = main.appendChild(document.createElement('textarea'));
 newTextarea.setAttribute('class', 'hotspot-output');
 newTextarea.value = JSON.stringify(hotspots);
 },
 },
});

Example 2: Using a Predefined Textarea Element If you already have a textarea element on the page, simply pass its ID to the valuehandler option:

const player = videojs('my-video', {
 hotspotsEditorPlugin: {
 valuehandler: 'textarea',
 },
});

IMA

Introduction

The KWIKplayer IMA Plugin integrates the Google Interactive Media Ads (IMA) SDK with KWIKplayer, enabling seamless ad playback in formats such as VAST, VMAP, or ad rules.

Configuration Options

The plugin provides several configuration options to customize its behavior. Below is a list of the supported options:

Usage

To enable the IMA plugin, include its configuration under the imaPlugin key when initializing KWIKplayer:

const player = window.kwikMotion('my-video', {
 imaPlugin: {
 adTagUrl: 'https://example.com/vast.xml',
 autoPlayAdBreaks: true,
 showCountdown: true,
 debug: false,
 }
})

Ad Scheduling

The adsSchedule option allows you to define a schedule for preroll, midroll, and postroll ads:

window.initPlayer('my-video', {
 imaPlugin: {
 adsSchedule: {
 preroll: ['https://example.com/preroll.xml'],
 30: ['https://example.com/midroll.xml'], // Midroll at 30 seconds
 postroll: ['https://example.com/postroll.xml'],
 },
 }
})

Events

The plugin emits various events to help you monitor ad behavior: Key Events

• ads-ad-started
• adstart
• adend
• adskip
• adtimeout
• adsready
• nopreroll
• nopostroll
• contentplay
• adserror

Example

player.on('ads-ad-started', () => {
 console.log('Ad started!');
});

Debugging

Enable debugging to log detailed information about the plugin's behavior:

window.initPlayer('my-video', {
 imaPlugin: {
 debug: true,
 }
})

IMA DAI

Introduction

The KWIKplayer IMA DAI Plugin integrates Dynamic Ad Insertion (DAI) with the KWIKplayer using Google's IMA SDK. This plugin enables seamless ad playback in live and Video on Demand (VOD) streams while providing options for stream configuration, localization, and ad behavior customization.

Configuration Options

The plugin accepts the following configuration options:

Events

The plugin triggers specific events during its lifecycle:

Usage

Initialization

To initialize the plugin, configure the imaDaiPlugin options in the KWIKplayer settings:

window.initPlayer('my-video', {
 imaDaiPlugin: {
 isLiveStream: true,
 streamFormat: 'hls',
 assetKey: 'your-live-asset-key',
 adTagParameters: {
 someParameter: 'value',
 },
 locale: 'en-US',
 },
})

KWIK Analytics

This module is a custom Video.js plugin that integrates with the Kwikstat analytics system to track player events and user interactions, such as playback, ads, and quality changes. It leverages the Piwik tracker, ensuring accurate reporting of video performance and user behavior.

Initialization

To enable plugin need to add in following option:

window.initPlayer('my-video', {
 kwikAnalyticsPlugin: {
 category: 'player-v9',
 mediaId: 'id0',
 url: `${document.location.protocol === 'https:' ? 'https' : 'http'}://stat.kwikmotion.com/`,
 events: ['adserror', 'ads-ad-started', 'timeupdate', 'ended', 'loadedmetadata'],
 title: document.title,
 interval: 5,
 userId: 'user-test-id',
 }
})

Options

Podcast

This module provides a customizable audio player with unique progress bar visualizations and extensive styling options. Designed for enhanced playback experiences, it includes options for displaying metadata, configuring playback controls, and customizing player themes.

Features

• Custom Progress Bar: Choose between visualizations based on the audio buffer or a randomized wave, with styles 'rounded' and 'lacerated'.
• Header Customization: Add a title, subtitle, and image to the player header.
• Volume and Speed Control: Change volume and playback playing.
• Time Displays: Enable displays for current time, remaining time, and duration.
• Additional Buttons: Include options for skip (forward/backward), share, playback speed, and download buttons.
• Theme and Style Customization: Adjust colors, tooltip styles, and other visual elements to match your design.

Requires player tag to be audio.

Usage Example

window.initPlayer('my-video', {
 tag: 'audio',
 podcastPlugin: {
 progressBar: {
 wave: 'lacerated',
 },
 title: 'Default podcast title',
 poweredBy: {
 link: 'https://www.kwikmotion.com/KWIKplayer/7/en',
 logo: 'https://www.kwikmotion.com/images/KWIKmotionLogo.png',
 title: 'Powered by KWIKmotion',
 },
 podcastDesignStudio: {
 progressHolderColor: 'black',
 background: 'transparent',
 playProgressColor: 'orange',
 controlsColor: 'orange',
 textColor: 'orange',
 themeColor: 'blue',
 tooltipBgColor: 'black',
 tooltipTextColor: 'white',
 },
 volume: {
 enable: true,
 },
 speed: {
 enable: true,
 },
 },
});

Podcast Module Options

The Podcast module offers extensive customization through the following options:

General Options

• title (string): The title displayed for the podcast player.
• titleWrapperClass (string): CSS class name applied to the wrapper containing the title.
• subtitle (string): The subtitle displayed for the podcast player.
• subtitleWrapperClass (string): CSS class name applied to the wrapper containing the subtitle.
• image (string): URL or path to the image associated with the podcast player.
• imageWrapperClass (string): CSS class name applied to the wrapper containing the image.

Powered By

poweredBy

• link (string): URL link for the "powered by" section.
• logo (string): URL or path to the logo displayed in the "powered by" section.
• title (string): Title or text displayed in the "powered by" section.
• wrapperClass (string): CSS class name applied to the wrapper containing the "powered by" section.

Design Options

podcastDesignStudio

• themeColor (string): Primary theme color for the podcast player.
• background (string): Background color for the podcast player.
• progressHolderColor (string): Color for the progress bar holder.
• playProgressColor (string): Color for the progress indicating playback.
• controlsColor (string): Color used for control icons and buttons.
• textColor (string): Text color used in the player.
• tooltipBgColor (string): Background color for tooltips.
• tooltipTextColor (string): Text color used in tooltips.

Download Options

download

• enable (boolean): Enables or disables the download button.
• text (string): Text displayed on the download button.
• downloadName (string): Default name for the downloaded audio file.
• wrapperClass (string): CSS class name applied to the wrapper containing the download button.

Share Options

share

• enable (boolean): Enables or disables the share button.
• text (string): Text displayed on the share button.
• wrapperClass (string): CSS class name applied to the wrapper containing the share button.

Speed Control

speed

• enable (boolean): Enables or disables the speed control button.
• text (string): Text displayed on the speed control button.
• wrapperClass (string): CSS class name applied to the wrapper containing the speed control button.
• defaultPlaybackRate (number): Default playback speed (e.g., 1.0 for normal speed).

Volume Control

volume

• enable (boolean): Enables or disables the volume control.
• wrapperClass (string): CSS class name applied to the wrapper containing the volume control.

Skip Controls

skipControls

• Forward Skip:
  forward
  • enable (boolean): Enables or disables the forward skip control.
  • text (string | function): Text displayed for the forward skip control. Can be a string or a function.
    Example: "Skip 15 seconds" or (value) => \Skip ${value} seconds`.
  • wrapperClass (string): CSS class name applied to the wrapper containing the forward skip control.
• Backward Skip
  backward:
  • enable (boolean): Enables or disables the backward skip control.
  • text (string | function): Text displayed for the backward skip control. Can be a string or a function.
    Example: "Rewind 15 seconds" or (value) => \Rewind ${value} seconds`.
  • wrapperClass (string): CSS class name applied to the wrapper containing the backward skip control.

Progress Bar Options

progressBar

• wave ('rounded' | 'lacerated'): Style of the wave in the progress bar.
• waveBasedOnAudioBuffer (boolean): Whether the progress bar wave is based on the audio buffer.

Time Displays

timeDisplays

• currentTimeDisplay (boolean): Enables or disables the display of the current playback time.
• currentTimeDisplayWrapperClass (string): CSS class name applied to the wrapper containing the current time display.
• durationDisplay (boolean): Enables or disables the display of the total duration.
• durationDisplayWrapperClass (string): CSS class name applied to the wrapper containing the duration display.
• remainingTimeDisplay (boolean): Enables or disables the display of the remaining playback time.
• remainingTimeDisplayWrapperClass (string): CSS class name applied to the wrapper containing the remaining time display.

Audio File

• file (string): URL of the audio file to be played.

NPAW Analytics

The NPAW Analytics module integrates NPAW (Nice People At Work) analytics with KWIKplayer to provide detailed playback insights and monitoring.

Initialization

To enable the NPAW Analytics plugin, provide the following options during player initialization:

window.initPlayer('my-video', {
 npawAnalyticsPlugin: {
 debug: true,
 'content.channel': 'Sports Channel',
 'content.contractedResolution': '1080p',
 'content.cost': '9.99',
 'content.customDimension.1': '1',
 'content.customDimension.2': 'CDN Title',
 'content.episodeTitle': 'Episode 1',
 'content.genre': 'Drama, Thriller',
 'content.id': '12345',
 'content.price': '1.99',
 'content.season': '2',
 'content.title': 'Great Series - Episode 1',
 'content.tvShow': 'Great Series',
 'content.type': 'episode',
 'user.name': 'user123',
 }
})

Options

Mandatory Options

The following options should be provided to ensure the plugin works correctly:

Optional Options

You can enhance the analytics tracking by including the following metadata:

DRM Support

The plugin detects and adapts to DRM configurations automatically. If DRM is enabled, the content.drm option is set to 'drm'; otherwise, it defaults to 'no drm'.

Ads Tracking

The NPAW Analytics module integrates with ads through the following:

• IMA Adapter: Tracks Google IMA ad events.
• DAI Adapter: Tracks Dynamic Ad Insertion (DAI) events.

Panorama module

The Panorama module is a TypeScript-based enhancement for integrating 360° video playback with support for multiple video types, including:

• Equirectangular
• Fisheye
• 3D Video
• Dual Fisheye

It includes a button for enabling Cardboard-VR mode, delivering an immersive viewing experience.

Leveraging the THREE.js library, a custom WebGL-based canvas renders the video source as a panoramic view. Developers can easily customize playback and interaction settings to suit diverse use cases.

Limitations

The module is incompatible with the Podcast module, audio-only mode, or the audio tag. Any of these configurations will prevent the module from functioning as intended.

Customization Options

You can configure the following options to tailor the video experience:

• clickAndDrag: Enables video rotation on drag-and-drop instead of mouse rollover.
• showNotice: Displays an instructional message to guide users about interacting with the video.
• initFov: Sets the initial field of view for the video.
• maxFov / minFov: Define the range of zoom levels for the video.
• initLat / initLon: Configure the initial camera position with latitude and longitude angles.
• backToVerticalCenter / backToHorizonCenter: Automatically return to center alignment when interaction stops.
• VREnable: Displays a VR button to toggle Cardboard-VR mode.
• videoType: Specify the type of video (e.g., 'equirectangular', 'fisheye', '3dVideo', 'dual_fisheye').
• NoticeMessage: Customize the instructional message text or use an HTML element for rich content.
• autoHideNotice: Sets the duration (in milliseconds) for which the instructional message is displayed.
• scrollable: Allows users to scroll within the video for additional navigation.
• returnStepLat / returnStepLon: Configure the speed at which the view returns to vertical or horizontal center when auto-centering is enabled.
• clickToToggle: Enables toggling video play/pause by clicking.
• minLat / maxLat: Define the minimum and maximum latitude for camera angles.
• minLon / maxLon: Set the longitude angle range.
• rotateX / rotateY / rotateZ: Specify initial rotation angles for the video view around the respective axes.
• autoMobileOrientation: Automatically adjusts the video based on mobile device orientation.
• mobileVibrationValue: Sensitivity of vibration-based video interactions on mobile devices.
• VRGapDegree: Sets the gap degree for VR mode to optimize viewing comfort.
• closePanorama: Indicates whether the panorama view should be closed.
• helperCanvas: Configure a helper canvas for rendering support.
• dualFish: Set parameters for dual fisheye layouts, including circle and layout configurations.

For more information see type interface

Example

window.initPlayer('my-video', {
 sources: [
 {
 src: '/assets/fisheye.mp4',
 type: 'video/mp4',
 },
 ],
 panoramaPlugin: {
 videoType: 'fisheye',
 maxLat: -10,
 initLat: -10,
 initLon: -270,
 rotateX: -Math.PI,
 },
})

Playlist

It is a standalone utility for managing video playlists in applications using Video.js. It provides functionality to handle playlist items, manage navigation, repeat/shuffle functionality, and trigger custom events when the playlist state changes.

Initialization

To enable plugin need to add in following option:

window.initPlayer('my-video', {
 playlistPlugin: {
 autoplay: true,
 items: [
 {
 sources: [
 {
 src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
 type: 'video/mp4'
 }
 ],
 poster: 'https://image.mux.com/5g1hMA6dKAe8DCgBB901DYB200U65ev2y00/thumbnail.jpg?time=43',
 title: 'The title of the episode in the playlist, long title is placed here, the title of',
 duration: '12m'
 },
 {
 sources: [
 {
 src: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/1900000/lSKPxmHWQxIQRIQIrdxgQ-20-Encoded-99449564-360p-5425v.mp4',
 type: 'video/mp4'
 }
 ],
 poster: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/1900000/Poster-UWe2eUYN2jkyPBkHHgGwaw-20-189030739-1.jpg',
 title: 'The Enigmatic Yonaguni Monument / The Enigmatic Yonaguni Monument / The Enigmatic Yonaguni Monument / The Enigmatic Yonaguni Monument',
 duration: '4m 52s'
 },
 {
 sources: [
 {
 src: 'https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/demo/1998418-2AVJS3l77X8WF84.smil/playlist.m3u8'
 }
 ],
 poster: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/1900000/Poster-58hLnfYY6FHbtEOXxK9RNw-20-948017507-1.jpg',
 title: 'Wave Watchers - The Art of Wave Photography',
 duration: '3m'
 },
 {
 sources: [
 {
 src: 'https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/demo/1981200-B2MGj2571UIT48Q.smil/manifest.mpd'
 }
 ],
 poster: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/1900000/Poster-k8XJwHE1i3S8HsGcueFu9Q-20-472728544-1.jpg',
 title: 'Contestant pairs must demonstrate skill as they endure seemingly simple tasks while confined in The Cube, an intimidating glass box with its own mind and attitude, in the hope of winning a major cash prize.',
 duration: '31 second'
 },
 {
 sources: [
 {
 src: 'https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/demo/2146802-0K7HJO02HU6uV3r.smil/playlist.m3u8'
 }
 ],
 poster: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/2100000/Poster-moaVC3LoNV54kER1i7O9bg-20-84995324-1.jpg',
 title: 'FAUL-2703 - FAUL-2703'
 },
 {
 sources: [
 {
 src: 'https://clvod.itworkscdn.net/itwvod/smil:itwfcdn/demo/2149575-cQL461C562HM8K3.smil/playlist.m3u8'
 }
 ],
 poster: 'https://embed.kwikmotion.com/VideosThumbsImages/demo/2100000/Poster-y6kDXw6K5U8qgTwt5oRHA-20-551803395-1.jpg',
 title: 'LONG MOVIE'
 },
 {
 sources: [
 {
 src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
 type: 'video/mp4'
 }
 ],
 poster: 'https://staging.faulio.com/storage/mediagallery/a6/22/big_680484a161e010ca50a229666448700f29463294.jpg',
 title: 'I know nothing about it',
 duration: '1333h'
 }
 ],
 title: 'Play next'
 }
});

Options

Playlist Options Interface:

PlaylistItem Options Interface:

Passing options for components other than the share-button may cause issues in the player.

Limitations

The following parameters must be applied initially to the player: tag, podcastPlugin, playlistPlugin, imaDaiPlugin, hotspotsEditorPlugin, chromecastPlugin, airplayPlugin, adblockPlugin.

Passing these options in the PlaylistItem options may lead to instability in the player.

Events

Safari HLS

The Safari HLS module is designed for enabling HLS playback on Safari, supporting both standard and DRM-protected streams. This plugin integrates seamlessly with the KWIKplayer ecosystem, offering smooth playback on Apple's browser.

Initialization

To enable Safari HLS support, configure the player options as follows:

window.initPlayer('my-video', {
 safariHlsPlugin: {
 drm: {
 certificateUrl: 'https://example.com/certificate',
 keySystem: 'com.apple.fps.1_0',
 licenseUrl: 'https://example.com/license,
 },
 }
})

Options