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

Video Player

Adding the Video Playback Widget

Reproduce the following steps to add the video playback widget.

Step 1:  Add the following HTML tag into the body section of your Web App code to add the Video Playback widget.

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

Other available input properties can be found below.

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

Note: Make sure id attribute is unique and the same id is passed into the methods and mashup-id is of the content that you want to play.

Step 2:  Add the following script into your web application code by making a function inside the script tags to call widget methods. A sample method can be seen as follows

<script>
 //to play the video
 function play() {
 document.getElementById('video-player').play();
 }
 //to set the volume of player
 function setVolumeLevel() {
 document.getElementById('video-player').setVolumeLevel(50);
 }
</script>

Other available methods can be found below.

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.

<script>
 document.getElementById("video-player").addEventListener('on-initializing', (evt) => {
 console.log(evt.type + ": ", evt.detail);
 });

 document.getElementById("video-player").addEventListener('on-initialized', (evt) => {
 console.log(evt.type + ": ", evt.detail);
 });

 document.getElementById("video-player").addEventListener('on-seek', (evt) => {
 console.log(evt.type + ": ", evt.detail);
 });
</script>

Other available events can be found below.

Input properties for Video 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.

Methods for Video 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.

Output Events for Video 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.
on-timed-data-visibility-changed
isTImedDataVisible: boolean
When timed data visibility is changed.

Callbacks for Video Playback Widget

Property
Params
Description
on-mashup-loading-sync
searchCriteria
A function 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 sucessfully completed.
on-mashup-loading-failed-sync
error
A function that is invoked when mashup search from server has failed.

Sample Code - VIDIZMO Video 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-video data-widget="true" id="101" mashup-id="171988"></vdz-mashup-video>

</div>


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

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

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

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

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

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

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

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

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

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

<button onclick="pause2()">pause video 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>