Before you start

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


Adding the Image Playback Widget

This will playback the content in the image player.


Get Started


Step 1:  Add the following HTML tag into the body section of your Web App code to add the Image Playback widget.

<vdz-mashup-image data-widget="true" mashup-id={mashup-id}></vdz-mashup-image>


Other available input properties can be found below.


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


Note: Make sure id attribute is unique and the same id is passed into the methods and mashup-id is of the content that you want to play.


Step 2:  Add the following Script tag 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

<script>
    function setZoomLevel() {
        document.querySelector('image-player').setZoomLevel(10);
    }
    function setAnnotation() {
        document.querySelector('image-player').setAnnotation(true);

    }
</script>

Other available methods can be found below.


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
        .querySelector('image-player')
        .addEventListener('on-initialized', (evt) => {
          console.log(evt.type + ': ', evt.detail);
        });

      document
        .querySelector('image-player')
        .addEventListener('on-rotated', (evt) => {
          console.log(evt.type + ': ', evt.detail);
        });
    </script>


Other available events can be found below.


Input properties for Image Playback Widget


PropertyTypeDefaultRequiredDescription
mashup-idstring-yesId corresponding to the unique content in user's portal



Methods for Image Playback Widget


MethodParamsData TypeReturn TypeDescription
setZoomLevelfactornumbervoidSets the zoom percentage for the image being played
setQualityLevelqualitynumbervoidSets the image quality level from the available renditions
setAnnotationstatusbooleanvoidSets whether or not to display annotations on an image

Output Events for Image Playback Widget


Event NameDataTypeScenario
on-mashup-loadingsearchCriteria-When a mashup search is being sent to the server, search criteria are received as event data.

on-mashup-loaded


mashupInfo-When the mashup search call is successful, mashInfo of fetched mashup is received as event data.
on-mashup-loading-failederrorHttpErrorResponseWhen the mashup search call has failed, error info is received as event data.
on-mashup-not-found

searchCriteria



When mashup search call couldn't find any mashup against searchcriteria


on-content-in-processing 


--


When the playback file is in the state of processing

on-content-in-processing-failed

--When the mashup content processing failed.
on-password-required--When mashup is protected by the password. When this event is raised, a form will be shown on the screen where the user will be able to enter a password.
on-password-validatedvalidationStatusbooleanWhen the password validation process has been completed.
on-initializing--This will be raised before loading the player.
on-initialized--This will be raised when the player has loaded.
on-quality-changedplaybackQualitystringThis event is raised when quality is changed inside the player.
on-timed-data-visibility-changedIsTimedDataVisibleboolean

This event is raised when timed data visibility i.e., annotation visibility is changed. 

on-errorerrorobject

Raised when an error occurs in the video player. 

on-draggedcoordinatesstring

When the image has been dragged inside the player, this event will be raised. 

on-fullscreen-changed

isFullscreenbooleanWhen the player goes into or exits from Fullscreen.
on-rotatedanglenumberWhen the player has rotated the document along an angle.
on-zoom-changedzoomedFactornumberWhen the player has zoomed in or out of the document.  
on-reset--When the player has reset to its original state.


Interceptors


VIDIZMO lets consumers of the widgets intercept the rendering pipeline and make changes in the data.


PropertyParamsDescription
searchCriteria
A function that is invoked when a mashup search from the server is about to be initiated.
on-mashup-loaded-syncmashupInfo

A function that is invoked when a mashup search from the server has been successfully completed. 

on-mashup-loading-failed-syncerror

A function that is invoked when a mashup search from the server has failed.