Before you start

Follow the instructions mentioned in the article to consume the VIDIZMO Playlist Player widget Getting Started


Adding the Collection Playback Widget

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


Get Started


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


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

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


Input properties for Playlist Player Widget


PropertyTypeDefaultRequiredDescription
mashup-idstring-YesId corresponding to a unique mashup in user portal
selected-mashup-idstring-NoWhen provided playlist player will start from the mashup whose id is provided
show-playlist-itemsboolean-NoIf this property is set to true, the player will show list button in control bar


Add Playlist 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 isFullScreen() {
        document.getElementById('playlist-player').isFullScreen();
    }
    // to expand player's slider
    function showListItems() {
        document.getElementById('playlist-player').showListItems();
    }

Other available methods are listed below. 


 Methods for Playlist Player Widget


MethodParametersReturn TypeDescription
isFullScreen-voidReturns true, if the playlist player is in full screen
showListItems-voidChange playlist list visibility to true
hideListItems-objectChange playlist list visibility to false
isListVisible-booleanReturns true, if playlist list is visible
playPlaylistItemmashupIdobjectPlay the playlist’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-errorerrorobjectRaised when error occurs in video player
on-fullscreen-changedisFullScreenbooleanWhen the player goes into or exits from full screen, this event is raised.
on-playlist-item-changed
mashupId
number
When playlist item has been changed, mashup id of next media to be played is received as event data
on-completed
mashupId
number
When collection item has been changed, this event is raised.
on-playlist-completedmashupIdnumberWhen the playlist last item has been played, this event will be raised


Sample Code

<html>
  <head>
    <meta charset="UTF-8" />
    <!-- VIDIZMO Imports -->
    <script
      type="text/javascript"
      src="https:/wahajulhaq.beta.vidizmo.com/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-playlist
      id="playlist-player"
      data-widget="true"
      mashup-id="{mashup-id}"
    >
    </vdz-mashup-playlist>

    <script>
      document
        .getElementById('playlist-player')
        .addEventListener('on-mashups-loading', (event) => {
          console.log(event);
          console.log('onMashupLoading');
        });
      document
        .getElementById('playlist-player')
        .addEventListener('on-mashups-loaded', (event) => {
          console.log(event);
          console.log('onMashupLoaded');
        });
      document
        .getElementById('playlist-player')
        .addEventListener('on-mashups-loading-failed', (event) => {
          console.log(event);
          console.log('onMashupLoadingFailed');
        });
    </script>
  </body>
</html>