Transcription
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 Name
Data
Scenario
on-download
mashupId
When 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-failed
error: HttpErrorResponse
When mashup transcription edit has failed, this event will be raised.
on-font-changed
boolean
When 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-player
seekToLocation: number
When 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>