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').