Collection Player
Adding the Collection Playback Widget
This will playback the collection's content in the player.
Get Started
Step 1: Add the following HTML into the body section of your web application code to add Collection player widget.
<vdz-mashup-collection id="collection-player" data-widget='true'> </vdz-mashup-collection>
Note: Make sure data-widget is set to 'true' as this applies the VIDIZMO default styling to the widget.
Input properties for Collection Player Widget
Property
Type
Default
Required
Description
mashup-id
string
-
Yes
Id corresponding to a unique mashup in user portal
show-slider
boolean
-
No
Sets whether or not slider should be expanded
start-from-mashup-id
string
-
No
When provided, collection player will start from the mashup whose id is provided
Add Collection 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 collapseSlider() {
document.getElementById('collection-player').collapseSlider();
}
// to expand player's slider
function expandSlider() {
document.getElementById('collection-player').expandSlider();
}
Other available methods are listed below.
Methods for Collection Player Widget
Method
Parameters
Return Type
Description
isFullScreen
-
Boolean
Returns true if the video player is in full screen
isSliderExpanded
-
Boolean
Returns true if the collection player slider is expanded
collapseSlider
-
Object
Collapse the player slider if it is expanded otherwise it will have no impact
expandSlider
-
Object
Expand the slider if it is collapse otherwise it will have no impact.
goToMashup
mashupId
object
Play the collection'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-fullscreen-changed
isFullScreen
boolean
When the player goes into or exits from full screen, this event is raised.
on-collection-item-completed
mashupId
number
When collection item has been completed, this event is raised.
on-collection-item-changed
mashupId
number
When collection item has changed, this event is raised.
on-completed
mashupId
number
When collection item has been changed, this event is raised.
Sample Code
< html >
< head >
< meta charset="UTF-8" />
<!--VIDIZMO Imports-->
<script type="text/javascript" src="{portal-address}/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>
<vdz-mashup-collection class="collection - player " data-widget="true " mashup-id={mashup - id}> </vdz-mashup-collection>
<script>
document.querySelector('.collection-player').addEventListener('on-mashups-loading', (event) => { });
document.getElementById('.collection-player').addEventListener('on-mashups-loaded', (event) => { });
document.getElementById('.collection-player').addEventListener('on-mashups-loading-failed', (event) => { });
</script>
</body>
</html>