Before you start
Follow the instructions mentioned in the article to consume the VIDIZMO Featured Media Widget How to use VIDIZMO Widgets
Adding the Featured Media Widget
The following code will display the Featured Media Widget.
<vdz-mashup-collage data-widget="true"></vdz-mashup-collage>
Note: Make sure data-widget is set to ‘true’ as this applies the VIDIZMO default styling to the widget.
VIDIZMO widgets have multiple events that are triggered on the various status and lifecycle changes. Following code examples explain how to utilize event listeners to subscribe to these events.
<script>
document.getElementById("collage").addEventListener("on-mashups-loading", (event) => {
console.log(event);
console.log("onMashupLoading");
});
document.getElementById("collage").addEventListener("on-mashups-loaded", (event) => {
console.log(event);
console.log("onMashupLoaded")
});
document.getElementById("collage").addEventListener("on-mashups-loading-failed", (event) => {
console.log(event);
console.log("onMashupLoadingFailed")
});
</script>Input properties for Featured Media Widget
Property | Type | Default | Required | Description |
search-criteria | MashupSearchCriteria |
| No |
|
keyword | string |
| No |
|
order-by | MashupOrderBy |
| No |
|
sort-type | SortType |
| No |
|
page-size | number |
| No |
|
page-index | number |
| No |
|
is-featured | boolean |
| No |
|
is-global | boolean |
| No |
|
show-on-channel-library | boolean |
| No |
|
status | MashupStatus |
| No |
|
All the available input properties can be found in the following article: Input properties available for widgets
Methods for Featured Media Widget
There are no methods for this widget.
Method | Params | Return Type | Description |
- | - | - | - |
Output Events for Featured Media Widget
Event | Data | Scenario |
on-mashups-loading | mashupSearchCriteria:MashupSearchCriteria
| When search criteria are changed and the call is not yet sent to the server. |
on-mashups-loaded | mashupInfo:MashupInfo
| Undefined is raised in case no mashups are returned from the server. |
on-mashups-loading-failed | exception
| When search call has failed. |
on-slide-changed | number | The latest slide number will be returned. |
on-play | { t: number, mashupInfo:MashupInfo} | This method will return time from where a user wants to playback and mashup the object that needs to be played. |
Sample Code
<html>
<head>
<meta charset="UTF-8" />
<!-- VIDIZMO Imports -->
<script type="text/javascript"
src="https://vidizmo-widgets.beta.vidizmo.com/static/js/vidizmo-player/player.js"></script>
<link rel="stylesheet" href="https://vidizmo-widgets.beta.vidizmo.com/static/compiled/widget/widgets.css" />
<script type="text/javascript"
src="https://vidizmo-widgets.beta.vidizmo.com/static/compiled/widget/widgets.js"></script>
</head>
<body style="margin: 20px;">
<vdz-mashup-collage id="collage" data-widget="true" page-size-md="4"
search-criteria={"sortType":"ASC","pageSize":36,"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true}>
</vdz-mashup-collage>
<script>
document.getElementById("collage").addEventListener("on-mashups-loading", (event) => {
console.log(event);
console.log("onMashupLoading");
});
document.getElementById("collage").addEventListener("on-mashups-loaded", (event) => {
console.log(event);
console.log("onMashupLoaded")
});
document.getElementById("collage").addEventListener("on-mashups-loading-failed", (event) => {
console.log(event);
console.log("onMashupLoadingFailed")
});
</script>
</body>
</html>Next Steps
You can playback the content by simply clicking on the content within the Media Library Gallery Widget. Upon clicking the content, an event "onPlay()" would be raised and listened to.
You can learn more about this in the following articles: