TABLE OF CONTENTS


Before you start


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 a unique content in user's portal



Methods for Image Playback Widget


MethodParamsData Type
Return TypeDescription
setZoomLevelfactornumbervoidSets the zoom percentage for the image being played
setQualityLevelqualitynumbervoidSets the image quality level from the available renditions
setAnnotationstatusbooleanvoid
Sets whether or not to display annotations on image

Output Events for Image Playback Widget


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

on-mashup-loaded


mashupInfo
-When mashup search call is successful, mashInfo of fetched mashup is received as event data.
on-mashup-loading-failed
error
HttpErrorResponse
When 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 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 screen where the user will be able to enter password.
on-password-validated
validationStatus
boolean
When 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-changed
playbackQuality
string
This event is raised when quality is changed inside player.
on-timed-data-visibility-changed
IsTimedDataVisible
boolean

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

on-error
error
object

Raised when error occurs in video player. 

on-dragged
coordinates
string

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

on-fullscreen-changed

isFullscreen
boolean
When the player goes into or exits from Fullscreen.
on-rotated
angle
number
When the player has rotated document along an angle.
on-zoom-changed
zoomedFactor
number
When the player has zoomed in or out of the document.  
on-reset
--When player has reset to its original state.


Interceptors


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


PropertyParamsDescription
searchCriteria

A function that is invoked when mashup search from server is about to be initiated.
on-mashup-loaded-sync
mashupInfo

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

on-mashup-loading-failed-sync
error

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