Before you start

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


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


PropertyTypeDefaultRequiredDescription
mashup-idstring
-
Yesid corresponding to a unique mashup in user portal
show-commentsboolean
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 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


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.
on-timed-data-visibility-changedisTImedDataVisible: booleanWhen timed data visibility is changed.



Callbacks for Video Playback Widget


PropertyParamsDescription
on-mashup-loading-syncsearchCriteriaA function 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 sucessfully completed.
on-mashup-loading-failed-syncerrorA 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>