Image Player

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

Methods for Image Playback Widget

Output Events for Image Playback Widget

Interceptors

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