Before you start

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


Adding the Document Playback Widget

Follow the steps given below to add the Document playback widget in your website.


Get Started


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

<vdz-mashup-document data-widget="true"></vdz-mashup-document >


Other available input properties for the Document player widget can be found below.


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


Input Properties


PropertyTypeDefaultRequiredDescription
mashup-idString-YesId corresponding to a unique content in user's portal.


Call Document Player methods


Step 2: Add the following code into the body section of your web application code to achieve the available functionality provided by VIDIZMO against this widget. Sample methods can be seen in the following code:

function setZoomLevel() {
        document.querySelector('.documentPlayer').setZoomLevel();
}

function goToPage() {
        document.querySelector('.documentPlayer').goToPage();
}

Other available methods for the Document player widget can be found below.


Methods


Method NameParamsReturn TypeDescription
setZoomLevellevelvoidSpecifies the zoom-in level for document. (Value between 1 - 100).
goToPagepageNumber{status :boolean, detail: string}Set document to specified page number

Listen to Document Player events


Step 3: Add the following code into the body section of your web application to consume and bind the available events for the document player widget. Sample events can be seen in the following code:

document.querySelector(".documentPlayer").addEventListener('on-mashup-loading', (evt) => {
    });

document.querySelector(".documentPlayer").addEventListener('on-mashup-loaded', (evt) => {
    });

Other available events for the Document player widget can be found below.


Events


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 content is received as event data.
on-mashup-loading-failederrorHttpErrorResponseWhen content search call has failed, error info is received as event data.
on-mashup-not-foundsearchCriteriaobjectWhen content search call couldn't find any mashup against searchCriteria.
on-content-in-processing--When the playback file is in processing state.
on-content-in-processing-failed--When the content processing has failed.
on-password-required--When content is password protected. 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-initializing--This will be raised when the player has loaded.
on-errorerrorobjectRaised when error occurs in the document player.
on-fullscreen-changedisFullscreenbooleanWhen the document player goes into or exits from full screen.
on-rotatedanglenumberWhen the document player has rotated document along an angle.
on-zoom-changedpageNumbernumberWhen the document player has zoomed in or out of the document.
on-page-changedPageNumbernumberWhen the document player has changed a page of the document.
on-reset--When the document player has reset to its original state.



Adding Callbacks


Step 4: Add the following code into the body section of your web application to intercept rendering pipelines and make changes in the data. Sample callback functions can be seen in the following code:

<vdz-mashup-document on-mashup-loading-sync="onLoading" data-widget="true" mashup-id="174342"></vdz-mashup-document>
<script>
       function onLoading(searchCriteria) {

              searchCriteria.mashupIds = [12121];
        }
</script>


In the code above, by calling onLoading method, VIDIZMO rendering pipeline is being intercepted during which the user can update the search criteria against which content would be searched. Furthermore, you can do accomplish similar tasks before the search call is initiated.


Callbacks


PropertyParamsDescription
on-mashup-loading-syncsearchCriteriaA function that is invoked when content search from server is about to be initiated.
on-mashup-loaded-syncmashupInfoA function that is invoked when mashup search from server has successfully completed. 
on-mashup-loading-failed-syncerrorA function that is invoked when mashup search from server has failed.



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-document class="document" on-mashup-loading-sync="onLoading" data-widget="true" mashup-id={mashup-id}>
    </vdz-mashup-document>
    <script>
        //methods
        function setZoomLevel() {
            document.querySelector('.document').setZoomLevel();
        }

        function goToPage() {
            document.querySelector('.document').goToPage();
        }
        //events
        document.querySelector(".document").addEventListener("on-mashup-loading", (event) => {
        });
        document.querySelector(".document").addEventListener("on-mashup-loaded", (event) => {
        });
        //Callback
        function onLoading(searchCriteria) {

            searchCriteria.mashupIds = [newMashupId];
        }
    </script>
</body>

</html>