Before you start

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


Adding the Collection Playback Widget

 This will playback the collection's content in the player.


Get Started


Step 1: Add the following HTML into the body section of your web application code to add Collection Player widget. 

<vdz-mashup-collection id="collection-player" data-widget='true'></vdz-mashup-collection>

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


Input properties for Collection Player Widget


PropertyTypeDefaultRequiredDescription
mashup-idstring-YesId corresponding to a unique mashup in user portal
show-sliderboolean-NoSets whether or not slider should be expanded
start-from-mashup-idstring-NoWhen provided, collection player will start from the mashup whose id is provided


Add Collection Player Widget methods


Step 2: Add the following method into the body section of your web application code by making a function inside the script tags to call widget methods. A sample method can be seen as follows


    // to collapse player's slider
    function collapseSlider() {
        document.getElementById('collection-player').collapseSlider();
    }
    // to expand player's slider
    function expandSlider() {
        document.getElementById('collection-player').expandSlider();
    }

Other available methods are listed below. 


 Methods for Collection Player Widget


MethodParametersReturn TypeDescription
isFullScreen-BooleanReturns true if the video player is in full screen
isSliderExpanded-BooleanReturns true if the collection player slider is expanded
collapseSlider-ObjectCollapse the player slider if it is expanded otherwise it will have no impact
expandSlider-ObjectExpand the slider if it is collapse otherwise it will have no impact.
goToMashupmashupIdobjectPlay the collection's mashup whose id is provided



Call Collection Player Widget methods


Step 3: Add the following Script tag into the body section of your web application code to bind the events and see these events in the console. 


<script>
    document
        .getElementById('collection-player')
        .addEventListener('on-initialized', evt => {
            console.log(evt.type + ': ', evt.detail);
        });

    document
        .getElementById('collection-player')
        .addEventListener('on-mashup-loading', evt => {
            console.log(evt.type + ': ', evt.detail);
        });

    document
        .getElementById('collection-player')
        .addEventListener('on-mashup-not-found', evt => {
            console.log(evt.type + ': ', evt.detail);
        });
</script>

Other available events can be found below. 


Output Events for Collection Player Widget


Event NameEvent DataTypeScenario
on-mashup-loadingsearchCriteriaobjectWhen content search call is being sent to server, search criteria is received as event data.
on-mashup-loadedmashupInfoobjectWhen content search call is successful, mashupInfo of fetched mashup is received as event data.
on-mashup-loading-failederrorHttpErrorResponseWhen content search call has failed, error info is received as event data.
on-mashup-not-foundsearchCriteria-When content search call couldn't find any mashup against search criteria.
on-password-required--When content is protected by password. When this event is raised, a form will be shown on screen where the user will be able to enter password.
on-password-validatedvalidationStatusbooleanWhen password validation process has been completed.
on-initialized--This will be raised when the player has loaded.
on-fullscreen-changedisFullScreenbooleanWhen the player goes into or exits from full screen, this event is raised.
on-collection-item-completedmashupIdnumberWhen collection item has been completed, this event is raised.
on-collection-item-changedmashupIdnumberWhen collection item has changed, this event is raised.
on-completedmashupIdnumberWhen collection item has been changed, this event is raised.


Sample Code

<html>

<head>
    <meta charset="UTF-8" />
    <!-- VIDIZMO Imports -->
    <script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js"></script>
    <link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css" />
    <script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js"></script>
</head>

<body>
    <vdz-mashup-collection class="collection-player" data-widget="true" mashup-id={mashup-id}>
    </vdz-mashup-collection>

    <script>
        document
            .querySelector('.collection-player')
            .addEventListener('on-mashups-loading', (event) => {
            });
        document
            .getElementById('.collection-player')
            .addEventListener('on-mashups-loaded', (event) => {
            });
        document
            .getElementById('.collection-player')
            .addEventListener('on-mashups-loading-failed', (event) => {
            });
    </script>
</body>

</html>