Image Player

<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>

Methods for Image Playback Widget