TABLE OF CONTENTS


Introduction

With organizations undergoing major digital transformation, VIDIZMO empowers enterprises to incorporate and lay out our application widgets within your current web applications. This enables them to provide a seamless experience to their end-users from a single unified user interface without any need to navigate .


Concept

With VIDIZMO Application Widgets, you can now rebuild VIDIZMO’s components over any web page of your organizational website. By using this documentation, you will be able to enhance your application’s experience by converting basic UI (User Interface) components into fully functional, interactive widgets which intelligently understand the events they are responsible for and communicate with each other to gel various aspects of the video streaming and content management platform.  


Before you start

Below are a few steps that you should perform before setting up VIDIZMO widgets on your website.


Widgets Authorization

The IP Address or web domain URL that shall incorporate VIDIZMO Widgets should be authorized to do so. To ensure that, you will have to whitelist the domains within your VIDIZMO Portal. This also includes generating a key against those domains for authorization. Below is a demonstration of how those Keys are managed against domains:




Setting up VIDIZMO for Websites

Below are the files you need to include in the header of your web application where you will be placing and rearranging HTML Widgets


{tenantUrl}/static/compiled/widgets/styles.css


{tenantUrl}/static/compiled/widgets/widgets.js


Note: You need to make sure to include your Portal’s URL while including the afore-mentioned files. Including them from any other location may lead to unforeseen inconsistencies.

Supported Browsers

List of supported browsers for seamless rendering of VIDIZMO Application Widgets includes, but is not limited to:


BrowserVersion
Chrome60+
Firefox60+
Internet Explorer8+
Edge70+
Safariv9 and up


Adapt to Site Branding

VIDIZMO Widgets have been inherently designed and built to intelligently adapt to the default branding scheme of your website. This enables organizations to readily incorporate VIDIZMO components within their existing web page architecture with incredible ease and convenience. 


VIDIZMO widgets use Bootstrap as a framework for styling and layout in combination with Font Awesome Icons.


Authenticate Users

In order to avail VIDIZMO’s advanced content and user segregation capabilities, the user access to VIDIZMO Widgets can be controlled via the following ways: 


Use your own Organization-Wide Web Login 

VIDIZMO seamlessly integrates with your web application by exchanging certain key user profile information. This information is then used to register your applications’ user as a “Viewer” in VIDIZMO Portal. 


In order to allow VIDIZMO to exchange this information, the browser window object should have the following attributes included: 


AttributeData TypeDescription
apiKeyStringFor a successful Single Sign-On (SSO) authentication process, including the apiKey generated when authorizing widgets shall be copied here.
This API key shall be used as a token to run administrative actions on the Portal such as user registration.
currentUICultureNameStringVIDIZMO application can be converted to multiple languages. so this attribute can be used to change the portal language to any of the available VIDIZMO portal language.

emailAddressStringSet this attribute if you have already authenticated users and you want them to use VIDIZMO Widgets using Single Sign-On.
firstNameStringThis attribute would only be used once when a new user will be login using Single Sign-On.
lastNameStringThis attribute would only be used once when a new user will be login using Single Sign-On.
groupsStringFill this array if you want to create new groups in VIDIZMO and make the current user part of it. If the group(s) already exists, simply the user would be the part of it.


Note: By default, language of VIDIZMO Portal is English. 


Note: All the users registered as Federated users shall be registered on the behalf of Manager+ user against whom API Key was generated while authorizing Widgets for your domain


Use VIDIZMO login or an SSO Login

If you wish to use a third-party Identity Provider service, VIDIZMO provides seamless integration with various single sign-on authentication providers, more about which can be read here: Understanding Single Sign-On in VIDIZMO


As soon as you load VIDIZMO widgets on a web page, based on the security policy of the Portal and the media, they will trigger the login component when there is no information found against user authentication. This will allow the user to either enter VIDIZMO login credentials or the login credentials against the configured SSO Provider on your Portal. 


You may also enable “Force Login” against a particular SSO Provider to automate user authentication if your users are already logged into their SSO Providers in a separate tab within the same browser.


Widgets Communication and Interaction

There are standard HTML Widgets that essentially enable you to reorder and shuffle UI components to modify your website’s layout. VIDIZMO Application Widgets go one-mile beyond by intelligently corresponding and communicating with each other using events. These events are triggered on various user interactions with the component, which in turn informs the other Widgets rendered on the same webpage to launch accordingly.


An example would be that when a category is clicked upon within the hierarchical view under "Faceted Navigation" Widget, it shall trigger an event that allows the "Mashup-View" Widget component to only show the media that has been associated with that category.


Widgets Components

Homepage Banner

The Homepage Banner is an image that can be displayed under the Navigation Menu of your Portal Homepage. Click, to see: How to Upload Homepage Banner. Once you have uploaded a Banner you can resize, relocate or even display or hide it by using the code below in the Theme Editor.


<vdz-account-header template-type="AccountHomePageHeader"> </vdz-account-header>


VIDIZMO users can set their uploaded media on the homepage of the portal as featured. Setting media as featured allows users to give prominence and quick access to their content. Click, to see: How to Feature Media on Homepage. The below code snippet will help you make necessary arrangements related to the Featured Media.


<vdz-mashups-featured mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":36,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true,"orderBy":"Weight"}' replace-mashups="false"> </vdz-mashups-featured>


Most Recent Media

The Most Recent Media section available on the Homepage, helps Portal users to get all the media uploaded to the portal recently at a glimpse from Portal Homepage. Use the code below to make required adjustments in the Most Recent Media section.


vdz-mashups-most heading="MashupsMostMostRecent" id="mashupsMost-MostRecentHeadingBtn" mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"UpdatedDate"}' replace-mashups="false" page-size-md="3"> </vdz-mashups-most>


The Most Popular Media section available on the Homepage under the Most Recent Media, helps Portal users to get all the media which is most liked by the end-users at a glimpse from Portal Homepage. Use the code below to make required adjustments in the Most Popular Media section.


<vdz-mashups-most heading="MashupsMostMostPopular" id="mashupsMost-MostPopularHeadingBtn" mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"Popularity"}' replace-mashups="false" page-size-md="3"> </vdz-mashups-most>


Most Viewed Media

The Most Viewed Media section available on the Homepage under the Most Popular Media, helps Portal users to get all the media which is most viewed by the end-users at a glimpse from Portal Homepage. Use the code below to make required adjustments in the Most Viewed Media section.


<vdz-mashups-most heading="MashupsMostMostViewed" id="mashupsMost-MostViewedHeadingBtn" mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"TotalViewed"}' replace-mashups="false" page-size-md="3"></vdz-mashups-most>


Featuring portals section on the Homepage is the best way of promoting it to users. This helps users to identify Portals of importance and relevance and makes it easier for them to access its content. Click, to see: How to Feature a Portal on Homepage. Use the code below to make the required changes to the placement of this section.


<vdz-featured-channel heading="FeaturedPortalsFeaturedChannel" tenant-search-criteria='{"isGlobal":true,"isFeatured":true,"pageIndex":0,"pageSize":15000,"orderBy":"Weight","sortType":"ASC","tenantSearchPart":["BasicInfo","TenantDetailInfo","ChannelStats"]}'> </vdz-featured-channel>


Tag Clouds 

Tag Cloud section is available under the Featured Portal section on the Homepage. Here an end-user can see the most used tags used in the metadata of the media uploaded to the Portal. Click, to see: How to Configure and Use Enterprise Tags. Use the code below to make the required changes to the placement of this section.

<vdz-enterprise-tag-cloud-filter></vdz-enterprise-tag-cloud-filter>


Category Info and Banner

Large-scale enterprises contain a collection of video content that needs to be divided into categories for better organization of the content. To solve this problem, VIDIZMO offers its customers to have distinct categories within a portal for content to be maintained and searched easily. Similar to the Homepage, VIDIZMO allows enterprises to add subjective styling to their Categories for their users to feel connected to their objectives. Click, to see: How to Brand a Category. Use the code below to make the required changes to the placement of this section.


<vdz-category-info category-id="##categoryId##"></vdz-category-info>

To learn more about categories in VIDIZMO, click to see: Understanding Categories


The Featured Category Carousel can be seen in the General Category section. To customize its look and feel, the following code snippet can be used. 


<vdz-category-most                                            
is-featured="true"
show-in-flat-view="true"
page-size-md="4"
parent-category-id="##parentCategoryId##">
</vdz-category-most>


Featured Media in Category Homepage

The Featured Media in Category Homepage similar to the Homepage can be controlled with the following code.


<vdz-mashups-featured            
data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":36,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"isFeatured":true,"orderBy":"Weight"}' replace-mashups="false">
</vdz-mashups-featured>


Most Recent Media in Category Homepage

The Most Recent Media Carousel in the Category Homepage can be controlled with the following piece of code.


<vdz-mashups-most 
heading="MashupsMostMostRecent"
id="mashupsMost-MostRecentHeadingBtn"
data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"UpdatedDate"}'
replace-mashups="false"
page-size-md="3">
</vdz-mashups-most>


Most Popular Media In Category Homepage

The following code snippet can be used to handle the customization of Most Popular Media in Category Homepage.the 


<vdz-mashups-most    
heading="MashupsMostMostPopular"
id="mashupsMost-MostPopularHeadingBtn"
data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"Popularity"}'
replace-mashups="false"
page-size-md="3">
</vdz-mashups-most>


Most Viewed Media in Category Homepage

Use the code below to handle customizations in Most Viewed Media Carousel available on the Category Homepage.


<vdz-mashups-most
heading="MashupsMostMostViewed"
id="mashupsMost-MostViewedHeadingBtn"
data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"TotalViewed"}'
replace-mashups="false"
page-size-md="3">
</vdz-mashups-most>

Document Player

VIDIZMO portals use document player to display documents. Following code snippet will be used to load document player widget on your website.

<vdz-mashup-ng2-pdf-viewer mashupId="28"
(onPasswordValidated)="onPasswordValidated($event)"
(onPasswordRequired)="onPasswordRequired($event)"
[onIsMediaInfoCollapsed] = "onIsMediaInfoCollapsed"
></vdz-mashup-ng2-pdf-viewer>

Image Player

VIDIZMO portals use image player to display images. Following code snippet will be used to load image player widget on your website.

<vdz-mashup-ngx-image-viewer mashupId="28"
(onPasswordValidated)="onPasswordValidated($event)"
(onPasswordRequired)="onPasswordRequired($event)"
[onIsMediaInfoCollapsed] = "onIsMediaInfoCollapsed"
></vdz-mashup-ngx-image-viewer>


Video & Playlist Player

Below is the code snippet for VIDIZMO Video and Playlist Players. Use this code if you wish to playback VIDIZMO portal's videos and playlists on your website using VIDIZMO Widgets.

<vdz-mashup-videojs-player #player mashupId="28"
data-e2e-player="player"
(onPasswordValidated)="onPasswordValidated($event)"
(onPasswordRequired)="onPasswordRequired($event)"></vdz-mashup-videojs-player>


Collection Player

Code snippet given below can be used for displaying VIDIZMO collection player on your website.

<vdz-mashup-collection-player mashupId=28></vdz-mashup-collection-player>


Comments

To display comments from VIDIZMO portal on your website. Use the below code snippet.


<vdz-comment-add-edit mashupId="28"></vdz-comment-add-edit>


Content Details

To show content details such as content views, likes, shares, report issue, and download button use this the code snippet.


<vdz-mashup-detail mashupId="28"></vdz-mashup-detail>


Faceted Navigation

VIDIZMO's faceted search allows you to further narrow down your search results by applying filters. Use the below code to display the filters option on your website. It will help your users search VIDIZMO portal content using filters while staying on your website.

<vdz-mashup-library-filter></vdz-mashup-library-filter>


Mashup Gallery View

This is a comprehensive view that allows you to view all mashups together in a thumb-view, list-view, or detail-view. This correlates with the faceted navigation and helps you get to the desired content faster and more efficiently.


<vdz-mashup-thumb-view
action-menu-items='{ "showLikeAction": "true", "showReportAction" : "true", "showFavoriteAction" : "true" }'
heading="Collection"
data-mashup-search-criteria='{"sortType":"DESC","pageIndex":0,"pageSize":18,"mashupSearchParts":["BasicInfo","Participation","Stats","UserStats","Tracking"],"mashupFormats":["collection"],"isGlobal":true,"showOnChannelLibrary":true,"orderBy":"UpdatedDate"}'
show-description="false">
</vdz-mashup-thumb-view>


Available Events

Below is the list of events that VIDIZMO Widgets are capable of throwing. One can use them to get the required information form the Widgets to incorporate it with their website.


EventFunction
onNoPlayableSourceWhen there is no playable source in content
onTheaterModeWhen player switch to theater mode
onContentInProcessingWhen content whose id is passed is in processing state
onContentInProcessingFailedWhen encoding workflow of content whose id is passed was failed in processing
onPasswordRequiredWhen content is password protected
onPasswordValidatedWhen password of content got validated from server
onReadyWhen player is ready and now vidizmo will initilize player with source, closed captions etc
onPlayWhen video starts playing. This will be raised when player is stopped and is played again
onBufferingWhen video player is in buffering state
onPauseWhen video is paused
onStopWhen video is stopped. This usually is raised when player is done playing video
onPlaylistItemWhen a new item in playlist is played
onPlaylistCompleteWhen all items of playlist are done playing
onCaptionChangeWhen closed caption file is changed
onQualityChangeWhen file quality is changed from player or got changed automatically due to network issue
onPlayerSizeChangeWhen player is resized
onSeekWhen player is about to seek. This is raised when user decides to seek video player
onSeekedWhen player is done seeking.
onVolumeChangeWhen volume is changed.
onMuteWhen player is muted
onSlideChangeWhen document page is changed
onCompleteWhen player has played media completely
onTimeRaised on every tick of player. Normally raised after every 250-52 ms.
onErrorWhen there is an error in player
onInitializingWhen player is initiaizing
onInitializedWhen player is initialized completely and is about to play media.


Note: VIDIZMO Widgets are continuously evolving, and we are adding more useful events with our Widgets.