Skip to content
English - United States
Contact us
  • There are no suggestions because the search field is empty.

Document player

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

Property
Type
Default
Required
Description
mashup-id
String
-
Yes
Id 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 Name
Params
Return Type
Description
setZoomLevel
level
void
Specifies the zoom-in level for document. (Value between 1 - 100).
goToPage
pageNumber
{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 Name
Event Data
Type
Scenario
on-mashup-loading
searchCriteria
object
When content search call is being sent to server, search criteria is received as event data.
on-mashup-loaded
mashupInfo
object
When content search call is successful, mashupInfo of fetched content is received as event data.
on-mashup-loading-failed
error
HttpErrorResponse
When content search call has failed, error info is received as event data.
on-mashup-not-found
searchCriteria
object
When 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-validated
validationStatus
boolean
When password validation process has been completed.
on-initializing
-
-
This will be raised when the player has loaded.
on-error
error
object
Raised when error occurs in the document player.
on-fullscreen-changed
isFullscreen
boolean
When the document player goes into or exits from full screen.
on-rotated
angle
number
When the document player has rotated document along an angle.
on-zoom-changed
pageNumber
number
When the document player has zoomed in or out of the document.
on-page-changed
PageNumber
number
When 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

Property
Params
Description
on-mashup-loading-sync
searchCriteria
A function that is invoked when content 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.

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>