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"
}
]
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);
},
},
];