Skip to main content
Version: V10

Carousel

Before you start

Follow the instructions mentioned in the article to consume the VIDIZMO Media widget How to use VIDIZMO Widgets

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.

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 

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

PropertyTypeDefaultRequiredDescription
search-criteriaMashupSearchCriteria No This is an object containing criteria(s) to search mashup(s) 
keywordstring NoIt will search mashups against the mentioned keyword  
order-byMashupOrderBy NoIt will order searched mashups according to the order-by possible values  
sort-typeSortType NoIt will sort searched mashups according to sort-type possible values  
 is-featuredboolean NoIt will search all the featured mashups of the portal 
is-globalboolean NoIt will search among all the mashups of the portal  
show-on-channel-libraryboolean NoIt will search all the mashups visible on the channel library of the portal  
statusMashupStatus NoIt will search all mashups of different statuses of the portal   
item-xsnumber No 
item-smnumber No 
item-mdnumber No 
item-lgnumber No 
headingstring No It is the main heading of the widget 

All the available input properties can be found in the following article: Input properties available for widgets

Output Events for Most Popular/Most Viewed/Most Recent Media Widget

EventDataScenario
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-changednumberThe 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.

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:

How to playback an audio from a widget

How to playback video from a widget