Before you start

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



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

 

 

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


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:

How to playback an audio from a widget

How to playback video from a widget