Skip to main content

Overlays

Overlays is an object that contains the definitions of all content to be overlayed over the video during, before or after playback for the SX PlayerSDK.

Example of an overlay is given below:

const overlays = {
  "id": 1659076400326,
  "type": "banner",
  "eventType": "",
  "top": 39.66,
  "left": 42.07,
  "autoDim": true,
  "width": 19.31,
  "height": 16.83,
  "displayText": "Hi $name",
  "eventName": "Hi $name",
  "url": "",
  "color": "var(--sxcPrimary)",
  "bg": "transparent",
  "start": 0.521657,
  "end": 84.700001,
  "font": "italic bold 20px cursive",
  "fontSize": 16,
  "fontWeight": "normal",
  "fontStyle": "normal",
  "textAlign": "center",
  "ctaPosition": "inside",
  "widthpx": "102.93px",
  "heightpx": "50.5px",
  "useImage": false,
  "targetSame": false,
  "ctaType": "text",
};
id
Random number ID for the overlay element.

Type: number

type
Specifies the type of overlay element.

Type: string (enum)
Values: "button", "banner", "form"

eventType
Event type for custom event handlers.

Type: string

eventName
Custom event name.

Type: string

url
URL to redirect users to when clicked.

Type: string

displayText
Text to display on the overlay element.

Type: string

start
Start time (in seconds) to begin displaying the overlay.

Type: number

end
End time (in seconds) to stop displaying the overlay.

Type: number

useImage
Determines whether to use an image instead of HTML embed.

Type: bool

imageWidth
Width of the image to display. Only applicable if useImage is true.

Type: string

imageHeight
Height of the image to display. Only applicable if useImage is true.

Type: string

imageBanner
URL of the image to display. Only applicable if useImage is true.

Type: string

top
Top position of the overlay element (percentage).

Type: number

CSS Properties

left
Left position of the overlay element (percentage).

Type: number

CSS Properties

width
Width of the overlay element (percentage).

Type: number

CSS Properties

height
Height of the overlay element (percentage).

Type: number

CSS Properties

color
Text color of the overlay element.

Type: string

CSS Properties

bg
Background color of the overlay element.

Type: string

CSS Properties

fontSize
Font size of the overlay text.

Type: number

CSS Properties

fontWeight
Font weight of the overlay text.

Type: string

CSS Properties

fontStyle
Font style of the overlay text.

Type: string

CSS Properties

textAlign
Text alignment of the overlay text.

Type: string

CSS Properties

widthpx
Width of the overlay element in pixels.

Type: string

CSS Properties

heightpx
Height of the overlay element in pixels.

Type: string

CSS Properties

Examples of overlay objects along with a preview of their appearance is as below:​


[
  {
    id: 1,                                  // random number ID
    type: "button",                         // string (enum) - button, banner, form
    eventType: "",                          // event type for custom event handlers
    eventName: "Buy Now",                   // custom event name
    url: "https://example.com",             // link to redirect users to onclick
    displayText: "Buy Now",                 // text to display
    start: 0,                               // start time (in seconds) to start overlay display
    end: 84.700001,                         // end time (in seconds) to stop overlay display
    ctaType: "text"                         // string (enum)
    useImage: false,                        // use image instead of html embed
    imageWidth: "420px",                    // img width to display, only id useImage is true
    imageHeight: "420px",                   // img height to display, only id useImage is true
    imageBanner: "https://url/test.jpg",    // img url to display, only id useImage is true
    // CSS Properties below
    top: 44,
    left: 40,
    width: 18.95,
    height: 16.8,
    color: "white",
    bg: "var(--sxcPrimary)",
    fontSize: 16,
    fontWeight: "normal",
    fontStyle: "normal",
    textAlign: "center",
    widthpx: "101px",
    heightpx: "50.4px",
  },
  {
    id: 2,
    type: "banner",
    eventType: "",
    top: 1.67,
    left: 27.81,
    autoDim: true,
    width: 39.18,
    height: 16.8,
    displayText: "Banner Text Goes Here.",
    eventName: "Banner Text Goes Here.",
    url: "",
    color: "#fff",
    bg: "white",
    start: 0,
    end: 84.700001,
    fontSize: 16,
    fontWeight: "normal",
    fontStyle: "normal",
    textAlign: "center",
    ctaPosition: "inside",
    widthpx: "208.812px",
    heightpx: "50.4px",
    useImage: false,
    targetSame: false,
    ctaType: "text"
  }
]
Data Flow

Button Example -

[
  {
    id: 3,
    type: "button",
    start: 9,
    end: 12,

    top: 55.17,
    left: 54.46,

    autoDim: false,
    width: 20,
    height: 15,

    displayText: "Visit Us",
    url: "https://www.google.com",

    color: "black",
    bg: "red",
  },
]

Form Example -

[
  {
    id: 1,
    start: 4,
    formHeading: "Enter your details to get added access!",
    fields: [
      {
        type: "text",
        name: "fname",
        placeholder: "First Name",
      },
      {
        type: "text",
        name: "lname",
        placeholder: "Last Name",
      },
      {
        type: "email",
        name: "email",
        placeholder: "Email",
      },
      {
        type: "number",
        name: "rating",
        placeholder: "Rating",
      },
    ],
    bg: "white",
    type: "form",
    eventName: "Form",
    skip: true,
    onSubmit(obj) {
      console.log(obj);
    },
  },
];