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

Carousel

Adding this widget will fetch the media against the portal you have bound and show the Media in carousel view.

Step 1: Add the following HTML in the body section of your web application code to add the carousel widget.

<vdz-mashup-carousel id="carousel" data-widget="true" > </vdz-mashup-carousel>

Note: Make sure data-widget is set to true as this applies the VIDIZMO default styling to the widget.

Step 2: The Carousel widget has 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("carousel").addEventListener("on-mashups-loading", (event) => {
 console.log(event);
 console.log("onMashupLoading");
 });
 document.getElementById("carousel").addEventListener("on-mashups-loaded", (event) => {
 console.log(event);
 console.log("onMashupLoaded")
 });
 document.getElementById("carousel").addEventListener("on-mashups-loading-failed", (event) => {
 console.log(event);
 console.log("onMashupLoadingFailed")
 });
</script>

Note: Make sure the id you pass in the getElementById is the same as used in the widget tag. E.g. "carousel"

Property
Type
Default
Required
Description
search-criteria
MashupSearchCriteria
No
This is an object containing criteria(s) to search mashup(s)
keyword
string
No
It will search mashups against the mentioned keyword
order-by
MashupOrderBy
No
It will order searched mashups according to the order-by possible values
sort-type
SortType
No
It will sort searched mashups according to sort-type possible values
is-featured
boolean
No
It will search all the featured mashups of the portal
is-global
boolean
No
It will search among all the mashups of the portal
show-on-channel-library
boolean
No
It will search all the mashups visible on the channel library of the portal
status
MashupStatus
No
It will search all mashups of different statuses of the portal
item-xs
number
No
item-sm
number
No
item-md
number
No
item-lg
number
No
heading
string
No
It is the main heading of the widget

Output Events for Most Popular/Most Viewed/Most Recent 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 - VIDIZMO Carousel Widget

<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-carousel id="carousel" data-widget="true" page-size-md="4"
 search-criteria='{"sortType":"ASC","pageSize":36,"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true}'>
 </vdz-mashup-carousel>

 <script>
 document.getElementById("carousel").addEventListener("on-mashups-loading", (event) => {
 console.log(event);
 console.log("onMashupLoading");
 });
 document.getElementById("carousel").addEventListener("on-mashups-loaded", (event) => {
 console.log(event);
 console.log("onMashupLoaded")
 });
 document.getElementById("carousel").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 will get two properties i.e. "Timestamp" and Mashup id which needs to be passed into the video/audio playback widget to be able to play the audio/video.

You can learn more about this in the following articles:

Scenario - Playback Media from Media Library