Overview

This widget empowers the user to show the Media sorted by Most recent with the ability to navigate through the most recent media without passing in any input properties. 


Before you start


Add the following HTML tag into the body section of your Web App code to add the Most Viewed Media widget. This will fetch the media against the portal you have bound and show the Media filtered by Most Viewed.


You have four ways to use this widget, which are as follows:


This widget fetches the most viewed media and shows the most viewed media in a carousel allowing you to navigate back and forth. In order to add the carousel widget sorted by most viewed, add the following script.

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

To learn how to bind the events and to know the available events for this widget please refer to the documentation: Bind Carousel Widget Events



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

Note: You don't need to pass in any input properties and this widget will fetch the media by its popularity and show it in a carousel view.



2. Collage

This widget fetches the most viewed media and shows the most viewed media in a collage. In order to add the collage widget sorted by most viewed, add the following script.

<vdz-mashup-mostviewed-collage id="mostViewedCollage" data-widget=’true’></vdz-mashup-mostviewed-collage>

To learn how to bind the events and to know the available events for this widget please refer to the documentation: Bind Collage Widget Event



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

Note: You don't need to pass in any input properties and this widget will fetch the media by its popularity and show it in a collage view.



3. Detail View

This widget fetches the most viewed media and shows the most viewed media in detail view. In order to add the detail view widget sorted by most viewed, add the following script.

<vdz-mashup-mostviewed-detailview id="mostViewedDetailView" data-widget=’true’></vdz-mashup-mostviewed-detailview>

To learn how to bind the events and to know the available events for this widget please refer to the documentation: Bind Detail View Event



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

Note: You don't need to pass in any input properties and this widget will fetch the media by its popularity and show it in a detail view.


This widget fetches the most viewed media and shows the most viewed media in gallery view. In order to add the gallery view widget sorted by most viewed, add the following script.

<vdz-mashup-mostviewed-galleryview id="mostViewedGalleryView" data-widget=’true’></vdz-mashup-mostviewed-galleryview>

To learn how to bind the events and to know the available events for this widget please refer to the documentation: Bind Gallery View Events



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

Note: You don't need to pass in any input properties and this widget will fetch the media by its popularity and show it in a gallery view.



Sample Code - VIDIZMO Most Popular Media Carousel Widget


<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 style="margin: 20px;">
    <vdz-mashup-mostviewed-carousel id="mostViewedCarousel" data-widget=’true’></vdz-mashup- mostviewed-carousel >

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