Skip to content
English - United States
Contact us
  • There are no suggestions because the search field is empty.

Collage

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>
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
-

There are no methods for this widget.

Method
Params
Return Type
Description
-
-
-
-
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:

Scenario - Playback Media from Media Library