Before you start

Follow the instructions mentioned in the article to consume the VIDIZMO Audio playback widget How to use VIDIZMO Widgets


Adding the Audio Playback Widget

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


Get Started


Step 1: Add the following HTML into the body section of your web application code to add the Audio Playback widget. 

<vdz-mashup-audio class="audio" data-widget="true" mashup-id={mashup-id}></vdz-mashup-audio>


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


Call audio player methods


Step 2: Add the following method into the body section of your web application code by making a function inside the script tag to call widget methods. Sample methods can be seen in the following code: 

function play() {
        document.querySelector('.audio').play();
}

function pause() {
        document.querySelector('.audio').pause();
}


Other available methods are listed below.


Listen to audio player events


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.

document.querySelector('.audio').addEventListener('on-initializing', 
evt => { });

document.querySelector('.audio').addEventListener('on-muted', 
evt => { });

Other available events can be found below.


Input properties for Audio Playback Widget


Property

Type

Default

Required

Description

mashup-id

string

-

yes

Id corresponding to a unique mashup in user portal

show-comments

Boolean

Undefined

No

1. If this property is not set, player will fall back to player template to check whether to enable comments or not.

2. If this property is set to false, and comments are enabled in player template, we will not show comments in player.

3. If comments are disabled in player template and enabled through this property, then we will show comments in player. So simply, this property will have priority.


All the available input properties can be found at the following article: Input properties available for widgets



Methods for Audio Playback Widget


Method

Params

Return Type

Description

play

-

void

Starts playing video inside player. If video is already playing, calling this method will have no impact on player.

pause

-

void

Pause video inside player. If video is already paused, calling this method will have no impact on player.

isPaused

-

boolean

Returns true, if video is paused inside player.

mute

-

void

Mute player. If player is already muted, calling this method will have no impact on player.

unMute

-

void

Unmute player. If player is not muted, calling this method will have no impact on player.

isMuted

-

boolean

Returns true, if player is muted. Otherwise returns false.

seek

positionInSecs: number

void

Seek player to provided location. If provided location is greater than video duration, then it won’t have any impact on player.

getVolumeLevel

-

number

Returns volume level of player.

setVolumeLevel

level: number

void

Change volume of player to provided level.

isFullScreen

 

-

boolean

Returns true, if video player is in full screen.

enterFullscreen

 

-

void

Take video player element to full screen. If player is already in full screen, calling this method will have no impact on player.

exitFullscreen

-

void

Take video player element to normal mode. If player is not in full screen mode, calling this method will have no impact on player.

getCurrentPosition

-

number

Returns current position of player in seconds.

enableCC

-

void

Enable closed caption display on player. If closed caption is already enabled, calling this method will not have any impact on player.

disableCC

-

void

Disable closed caption display on player. If closed caption is already disabled, calling this method will not have any impact on player.

isCCDisabled

-

boolean

Returns true, if closed caption is disabled in player.

destroy

-

void

Calling this method will destroy player element.

 

Output Events for Audio Playback Widget


EventDataScenario
on-mashup-loadingsearchCriteriaWhen mashup search call is being sent to server search criteria is received as event data
on-mashup-loadedmashupInfoWhen mashup search call is successful, mashupInfo of fetched mashup is received as event data
on-mashup-loading-failed
When mashup search call has failed, error info is received as event data
on-mashup-not-foundsearchCriteriaWhen mashup search call couldn't find any mashup against search criteria
on-no-playable-source-When original file playback is enabled in portal, but mashup is not transcoded and original file is not playable in browser
on-content-in-processing
When original file playback is disabled in portal and mashup is in processing.
on-content-in-processing-failed
When original file playback is disabled in portal and mashup content processing failed.
on-password-required
When mashup is protected by the password. When this event is raised, a form will be shown on screen where the user will be able to enter password.
on-password-validated
When password is successfully validated
on-initializing
This will be raised before loading the player
on-initialized
This will be raised when the player has loaded
on-playplayingStartPosition: numberThis event is raised as soon as the first frame of the video starts playing
on-buffering-startedbufferingStartPosition: numberThis event is raised when the player has started buffering
on-buffering-completedbufferedDuration: numberThis event is raised when the player buffering is completed
on-pausedpausePosition: numberThis event is raised as soon as the player is paused
on-caption-changedlanguage: stringThis event is raised when the user has changed caption in player
on-quality-changedplaybackQuality: stringThis event is raised when the quality is changed inside the player.
on-player-size-changedplayerSize: stringThis event is raised when player is resized in DOM
on-seekseekToPosition: numberThis event is raised when the player is seeking
on-seekedseekedPosition: numberThis event is raised when the player is done seeking
on-volume-changedvolumeLevel: numberThis event is raised when volume level has been changed in player
on-mutedisMuted: booleanThis event is raised when the player mute status has been changed
on-completedmashupId: numberThis event is raised when the video is completed. Completion is calculated using completion criteria of video. In DEM, completion is tracked when the video is finished.
on-time
Raied after every 50ms to 300ms and reports current position of player.
on-errorerror: objectRaised when error occurs in video player.
on-caption-visibility-changedisCCVisible: booleanWhen closed caption is turned on/off in player.
on-theater-modeisTheaterMode: booleanWhen the player goes in theater mode, this event is raised.
on-speed-changedplaybackRate: numberWhen player playback speed rate is changed.
on-fullscreen-changedisFullScreen: booleanWhen the player goes into or exits from Fullscreen.


Interceptors


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


PropertyParamsDescription
on-mashup-loading-syncsearchCriteriaA function that is invoked when mashup search from server is about to be initiated.
on-mashup-loaded-syncmashupInfoA function that is invoked when mashup search from server has successfully completed.
on-mashup-loading-failederrorA function that is invoked when mashup search from server has failed.



Sample Code - VIDIZMO Audio Playback Widget

<script type="text/javascript" src="https:// test-5.beta.vidizmo.com/static/js/vidizmo-player/player.js"></script>

<link rel="stylesheet" href="https:// test-5.beta.vidizmo.com/static/compiled/widget/widgets.css" />

<script type="text/javascript" src="https:// test-5.beta.vidizmo.com/static/compiled/widget/widgets.js"></script>



<div>

    <vdz-mashup-audio data-widget="true" id="101" mashup-id="169378"></vdz-mashup-audio>

</div>



<button onclick="play1()">play audio 1</button>

<button onclick="pause1()">pause audio 1</button>

<button onclick="mute1()">mute audio 1</button>

<button onclick="unmute1()">unmute audio 1</button>

<button onclick="getvolume1()">getVolume audio 1</button>

<button onclick="gofull1()">gofull audio 1</button>

<button onclick="gettime1()">gettime audio 1</button>

<button onclick="destroy1()">destroy audio 1</button>

<button onclick="seek1()">seek audio 1</button>

<button onclick="play2()">play audio 2</button>

<button onclick="pause2()">pause audio 2</button>



<script>

    function play1() {

        document.getElementById("101").play();

    }

    function pause1() {

        document.getElementById("101").pause();;

    }

    function mute1() {

        document.getElementById("101").mute();;

    }

    function unmute1() {

        document.getElementById("101").unMute();;

    }

    function getvolume1() {

        console.log(document.getElementById("101").volume());

    }

    function gofull1() {

        document.getElementById("101").enterFullscreen();

    }

    function gettime1() {

        console.log(document.getElementById("101").time());

    }

    function destroy1() {

        document.getElementById("101").destroy();

    }

    function seek1() {

        document.getElementById("101").seek(24);

    }

    function play2() {

        document.getElementById("102").play();

    }

    function pause2() {

        document.getElementById("102").pause();

    }

</script>