Playlist Player
Adding the Collection Playback Widget
This will playback the playlist's content in the player.
Get Started
Step 1: Add the following HTML into the body section of your web application code to add Playlist Player widget.
<vdz-mashup-playlist id="playlist-player" data-widget='true'> </vdz-mashup-playlist>
Note: Make sure data-widget is set to 'true' as this applies the VIDIZMO default styling to the widget.
Input properties for Playlist Player Widget
Property
Type
Default
Required
Description
mashup-id
string
-
Yes
Id corresponding to a unique mashup in user portal
selected-mashup-id
string
-
No
When provided playlist player will start from the mashup whose id is provided
show-playlist-items
boolean
-
No
If this property is set to true, the player will show list button in control bar
Add Playlist Player Widget methods
Step 2: Add the following method into the body section of your web application code by making a function inside the script tags to call widget methods. A sample method can be seen as follows
// to collapse player's slider
function isFullScreen() {
document.getElementById('playlist-player').isFullScreen();
}
// to expand player's slider
function showListItems() {
document.getElementById('playlist-player').showListItems();
}
Other available methods are listed below.
Methods for Playlist Player Widget
Method
Parameters
Return Type
Description
isFullScreen
-
void
Returns true, if the playlist player is in full screen
showListItems
-
void
Change playlist list visibility to true
hideListItems
-
object
Change playlist list visibility to false
isListVisible
-
boolean
Returns true, if playlist list is visible
playPlaylistItem
mashupId
object
Play the playlist's mashup whose id is provided
Call Collection Player Widget methods
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('collection-player').addEventListener('on-initialized', evt => {
console.log(evt.type + ':', evt.detail);
});
document.getElementById('collection-player').addEventListener('on-mashup-loading', evt => {
console.log(evt.type + ':', evt.detail);
});
document.getElementById('collection-player').addEventListener('on-mashup-not-found', evt => {
console.log(evt.type + ':', evt.detail);
});
</script>
Other available events can be found below.
Output Events for Collection Player Widget
Event Name
Event Data
Type
Scenario
on-mashup-loading
searchCriteria
object
When content search call is being sent to server, search criteria is received as event data.
on-mashup-loaded
mashupInfo
object
When content search call is successful, mashupInfo of fetched mashup is received as event data.
on-mashup-loading-failed
error
HttpErrorResponse
When content search call has failed, error info is received as event data.
on-mashup-not-found
searchCriteria
-
When content search call couldn't find any mashup against search criteria.
on-password-required
-
-
When content is protected by 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
validationStatus
boolean
When password validation process has been completed.
on-initialized
-
-
This will be raised when the player has loaded.
on-error
error
object
Raised when error occurs in video player
on-fullscreen-changed
isFullScreen
boolean
When the player goes into or exits from full screen, this event is raised.
on-playlist-item-changed
mashupId
number
When playlist item has been changed, mashup id of next media to be played is received as event data
on-completed
mashupId
number
When collection item has been changed, this event is raised.
on-playlist-completed
mashupId
number
When the playlist last item has been played, this event will be raised
Sample Code
<html>
<head>
<meta charset="UTF-8" />
<!-- VIDIZMO Imports -->
<script
type="text/javascript"
src="https:/wahajulhaq.beta.vidizmo.com/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 style="margin: 20px">
<vdz-mashup-playlist
id="playlist-player"
data-widget="true"
mashup-id="{mashup-id}"
>
</vdz-mashup-playlist>
<script>
document
.getElementById('playlist-player')
.addEventListener('on-mashups-loading', (event) => {
console.log(event);
console.log('onMashupLoading');
});
document
.getElementById('playlist-player')
.addEventListener('on-mashups-loaded', (event) => {
console.log(event);
console.log('onMashupLoaded');
});
document
.getElementById('playlist-player')
.addEventListener('on-mashups-loading-failed', (event) => {
console.log(event);
console.log('onMashupLoadingFailed');
});
</script>
</body>
</html>