Audio Player
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.
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
If this property is not set, player will fall back to player template to check whether to enable comments or not. If this property is set to false, and comments are enabled in player template, we will not show comments in player. 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.
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
Event
Data
Scenario
on-mashup-loading
searchCriteria
When mashup search call is being sent to server search criteria is received as event data
on-mashup-loaded
mashupInfo
When 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-found
searchCriteria
When 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-play
playingStartPosition: number
This event is raised as soon as the first frame of the video starts playing
on-buffering-started
bufferingStartPosition: number
This event is raised when the player has started buffering
on-buffering-completed
bufferedDuration: number
This event is raised when the player buffering is completed
on-paused
pausePosition: number
This event is raised as soon as the player is paused
on-caption-changed
language: string
This event is raised when the user has changed caption in player
on-quality-changed
playbackQuality: string
This event is raised when the quality is changed inside the player.
on-player-size-changed
playerSize: string
This event is raised when player is resized in DOM
on-seek
seekToPosition: number
This event is raised when the player is seeking
on-seeked
seekedPosition: number
This event is raised when the player is done seeking
on-volume-changed
volumeLevel: number
This event is raised when volume level has been changed in player
on-muted
isMuted: boolean
This event is raised when the player mute status has been changed
on-completed
mashupId: number
This 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-error
error: object
Raised when error occurs in video player.
on-caption-visibility-changed
isCCVisible: boolean
When closed caption is turned on/off in player.
on-theater-mode
isTheaterMode: boolean
When the player goes in theater mode, this event is raised.
on-speed-changed
playbackRate: number
When player playback speed rate is changed.
on-fullscreen-changed
isFullScreen: boolean
When the player goes into or exits from Fullscreen.
Interceptors
VIDIZMO lets widgets' consumers to intercept rendering pipeline and make changes in the data.
Property
Params
Description
on-mashup-loading-sync
searchCriteria
A function that is invoked when mashup 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
error
A 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>