Before you start

Follow the instructions mentioned in this article to consume the VIDIZMO Transcription Widget: How to use VIDIZMO Widgets


Adding the Transcription Widget

Follow the steps given below to add the transcription widget in your website.


Get Started


Step 1: Add the following HTML tag into the body section of your Web App code to add the Transcription Widget.

<vdz-mashup-transcription class="transcription" data-widget="true"></vdz-mashup-transcription>


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

Call Transcription widget Events


Step 2: Add the following JS into the body section of your web application to consume and bind the available events for the transcription widget.  Sample events can be seen in the following code: 
 
document.querySelector(".transcription").addEventListener('on-download', (evt) => {
    });

document.querySelector(".transcription").addEventListener('on-edited-successful', (evt) => {
    });

Other available events for the transcription widget can be found below.


Events


Event NameDataScenario
on-downloadmashupIdWhen the mashup transcription download starts, this event will be raised.
on-edited-successful-When mashup transcription has been edited successfully, this event is raised.
on-edited-failederror: HttpErrorResponseWhen mashup transcription edit has failed, this event will be raised.
on-font-changedbooleanWhen mashup transcription font size is changed, this event will be raised. Event data will be received as true when fontSize is set to large otherwise false.
on-sync-playerseekToLocation: numberWhen mashup transcription row has been clicked to sync with player, this event will be raised.


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-transcription class="transcription" data-widget='true' mashup-id={mashup-id}></vdz-mashup-transcription>
    <script>
        document.querySelector(".transcription").addEventListener("on-download", (event) => {
    });
    </script>
</body>
</html>