Current version: (AGNO-JavaScript API)
// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href,
...
// add the following:
overlayEnabled: true,
overlay: {
overlays: [{
align: 'left',
content: 'Client configured overlay',
start: 1,
end: 15,
}],
},
The content, behaviour, and the look & feel of an overlay can be determined by any frontend. The documentation below provides various options for this. But because Agnoplay prefers to relieve any frontend developer, we can also resolve any input for controlling the text overlay coming from any backend (VMS, MAM, etc.) as part of the other metadata available.
You can define overlays as follows:
// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href,
...
// add the following:
overlayEnabled: true,
overlay: {
content: '<strong>Default overlay content</strong>',
overlays: [{
align: "top",
content: 'This event-triggered overlay message appears when the video is playing',
start: 'play',
end: 'pause'
}, {
content: 'This timed overlay message appears between 5 and 10 seconds',
start: 5,
end: 10,
align: 'bottom-right'
}, {
start: 12,
end: 17,
align: 'bottom-left'
}],
},
The following plugin options are used to control the overlay object:
align
:
top-left
,
top
, top-right
, right
, bottom-right
, bottom
, bottom-left
,
left
.
attachToControlBar
:
If set to true
or a string value, bottom aligned overlays will adjust positioning when the control bar minimizes. This has no effect on overlays that are not aligned to bottom, bottom-left, or bottom-right. The option is for use with the default control bar, and may not work for custom control bars. Bottom aligned overlays will be inserted before the specified component. Otherwise, bottom aligned overlays are inserted before the first child component of the ControlBar. All other overlays are inserted before the ControlBar component.
// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href,
...
// add the following:
overlayEnabled: true,
overlay: {
content: 'Default overlay content',
attachToControlBar : true,
overlays: [{
align: "top",
content: 'This event-triggered overlay message appears when the video is playing',
start: 'play',
end: 'pause'
}, {
content: 'This timed overlay message appears between 5 and 10 seconds',
start: 5,
end: 10,
align: 'bottom-right'
}, {
start: 12,
end: 17,
align: 'bottom-left'
}],
},
Or for individual overlay objects:
// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href,
...
// add the following:
overlayEnabled: true,
overlay: {
content: 'Default overlay content',
overlays: [{
align: "top",
content: 'This event-triggered overlay message appears when the video is playing',
start: 'play',
end: 'pause'
}, {
content: 'This timed overlay message appears between 5 and 10 seconds',
start: 5,
end: 10,
align: 'bottom-right'
}, {
start: 12,
end: 17,
align: 'bottom-left',
attachToControlBar : true
}],
},
A top level setting can be overridden by option use on individual overlay objects.
class
:
.video-js
selector along with the selector you choose (the specificity must be increased so the style is not overridden):
.video-js .customOverlay {
color: yellow;
background-color: red;
}
// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href,
...
// add the following:
overlayEnabled: true,
overlay: {
content: 'Default overlay content',
class: 'customOverlay',
overlays: [{
align: "top",
content: 'This event-triggered overlay message appears when the video is playing',
start: 'play',
end: 'pause'
}, {
content: 'This timed overlay message appears between 5 and 10 seconds',
start: 5,
end: 10,
align: 'bottom-right'
}],
},
Or for individual overlay objects:
// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href,
...
// add the following:
overlayEnabled: true,
overlay: {
content: 'Default overlay content',
overlays: [{
class: 'customOverlay',
align: "top",
content: 'This event-triggered overlay message appears when the video is playing',
start: 'play',
end: 'pause'
}, {
class: 'customOverlay2',
content: 'This timed overlay message appears between 5 and 10 seconds',
start: 5,
end: 10,
align: 'bottom-right'
}],
},
A top level setting can be overridden by option use on individual overlay objects.
content
:
This overlay will show up while the video is playing
.end
:
play
, pause
or ended
. A list of all player events is located in the Events.
overlays
:
start
and end
option. Other options used as desired.
showBackground
:
start
:
play
, pause
or
ended
. A list of all player events is located in the Events
// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href,
...
// add the following:
overlayEnabled: true,
overlay: {
content: '<strong>Default overlay content</strong>',
overlays: [{
align: "top",
content: 'This event-triggered overlay message appears before the video starts playing',
start: 'loadstart',
end: 'play'
}],
},
All of these properties are optional, but you may get strange results if you don't include at least the start
and end
properties.