Video widgets expose some properties and events that are useful for developers to customize behaviors and do something on various actions. These properties and events are only available for vidizmo.videos namespace currently. A brief account of properties and events available is provided below.

 


Properties


Video widgets expose following properties that can be overridden:

 

Properties
Description
results_per_page
This widget property defines the number of videos to display on each page of a widget.
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
 
 // number of videos to display per page
 // default value is 10
 results_per_page: 40
});
 
sort
This widget property defines Sort Order of videos.  Sort order can have one of following values which are self-explanatory
 
Possible  Values:
vidizmo.enumerations.SortOptions.Title,
vidizmo.enumerations.SortOptions.Duration,
vidizmo.enumerations.SortOptions.TopRated,
vidizmo.enumerations.SortOptions.MostViewed,
vidizmo.enumerations.SortOptions.MostRecent,
vidizmo.enumerations.SortOptions.MostFavorites,
vidizmo.enumerations.SortOptions.MostCommented,
vidizmo.enumerations.SortOptions.MostRelevant
 
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
sort: vidizmo.enumerations.SortOptions.MostRecent
});
 


tag
‘tag’ property tells the widget to filter results based on the tag provided.
 
 
When initializing widget, set this property as shown below


var featuredReference = vidizmo.videos.channel('.featured-videos', {
tag: "Windows Azure"
});


 


mashup_type
Videos in VIDIZMO can be of two types primarily, one On-demand and second Live. To filter videos with one of these options or to tell the widget to return all videos combined, use this property. If not provided, this is set  to 0
 
Possible Values
0 = Live, On - Demand
1 = Live
2 = On – Demand
 
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
mashup_type: 2
});
 
 
 
category
This property tells the widget to filter results for a given category id.
 
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
category: 234
});
 
 
empty_data_template
This property sets message that will be displayed if the widget doesn’t  have any results to display. This is often used when the developer wants to return custom HTML or entirely a different message.
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
empty_data_template: 'Sorry, we couldn’t find any video for your searched term.'
});
 
 
playback_page_url
URL of video playback. This property lets developers override  Playback URL. Therefore allowing playback on enterprise portal. Page URL can  be passed any video information as parameters
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
playback_page_url: '/Page.aspx?id= '
});
 


details_page_url
URL of video detail page. This property lets developers override  Video detail page URL. Therefore allowing video details displayed on enterprise portal. Page URL can be passed any video information as parameters
 
When initializing widget, set this property as shown below


var featuredReference = vidizmo.videos.channel('.featured-videos', {
details_page_url: '/Page.aspx?id='
});


 


pagination
‘pagination’ is itself an object having multiple properties of its own. ‘pagination’ defines how Widget’s pagination will be formatted, labels used for buttons as well as CSS class to be applied.
 
An example is provided below showing all possible options that you  can get by utilizing this property
 
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
pagination: {
 // specify how pagination should appear
 // there are five keywords which can be specified space separated
 // "numbers" will only display pagination numbers
 // "prev next" will only show prev and next buttons
 // "first last" will only display first and last buttons
 // default value is "prev next"
 format: 'prev next',
 
 
 // specify labels for each button
 // specific labels for each button
 // default values are
 // next = '>',
 // prev = '<',
 // first = '<<',
 // last: '>>'
 labels: {
 next: 'Goto next page',
 prev: 'Goto prev page',
 first: 'Goto first page',
 last: 'Goto last page'
 },
 
 
 // specify custom css class for each button
 // this will allow you to fully customize look and feel of pagination buttons
 css_class: {
 next: 'pagination-next',
 prev: 'pagination-prev',
 first: 'pagination-first',
 last: 'pagination-last',
 numbers: 'pagination-number'
 }
 }
});
 
 
template
‘template’ property allows the developer to choose from 3 different views available that render HTML differently.
 
Possible Values:
vidizmo.enumerations.TemplateStyles.ThumbnailView,
vidizmo.enumerations.TemplateStyles.DetailsView,
vidizmo.enumerations.TemplateStyles.ListView
 
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
template: {
 style: vidizmo.enumerations.TemplateStyles.DetailsView,
 }
});
 
 
 
ui_settings
This property is actually an object with multiple properties of its own. ‘ui_settings’ tells widget what video information to display as well as thumbnail size to use. Using this setting, developer can show less or more  information depending on the user interface they want to construct.
 
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
ui_settings: {
 // thumbnail size of video
 size: [300, 300],
 single_item: {
 
 // display video views
 // default value is false
 display_views: true,
 
 
 // display author name
 // default value is false
 display_author: true,
 
 
 // display video duration on video thumbnail
 // default value is true
 display_duration: false,
 
 
 // display video published date
 // default value is false
 display_published_date: true,
 
 
 // custom css class to change interface as desired
 // this class is applied on each video rendered on ui.
 custom_class: "VideoItem",
 
 
 
 display_description: true,
 
 
 display_tags: true,
 
 //display thumbnail
 display_thumbnail: true,
 
 //display title of a content
 display_title: true,
 // content title truncated length
         title_truncate_length: 0,
 
 //display price of a content
 display_price: true,
 
 //display no of favorites on a content
 display_favorites: true,
 
 //display no of flags on a content
 display_flags: true,
 
 // content description truncated length
 description_truncate_length: 0,
 // display read more link in description
 display_readmore_link: false,
 
 // content’s tag truncated length
 tag_truncate_length: 0,
 
 // display expiry date of a content
 display_expiry_date: false,
 
 // display featured content
               display_is_featured: false,
 
 
 // display content which will be visible on channel library
 display_show_on_library: false,
 }
 
 }
});
 
 


Page
This widget property defines page number of videos
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
 
 
 // default value is 0
 page: 0
});
 


 
query
This widget property search particular video by name
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
 
 
 
 query: 'Windows Azure’
});
 
 
mashup_format
This widget property search content by format.
 
Possible Values
1 = Audio
2 = Collection
3 = Document
4 = Image
5 = PlayList
6 = Presentation
7 = SCORM2004
8 = Video
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
 
 
 // default value is 0
 // It will show All formats content
 mashup_format: 1
});
 
 
 
status
This widget property search content by status.
 
Possible Values
1 = Drafted
2 = Pending For Approval
3 = Published
4 = Rejected
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
 
 
 
 status: 3
});
 
tenant_id
This widget property search content by tenant id.
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
 
 
 
 tenant_id: 33
});
 
 
access_token
It is a key which will be returned after you log in
 
When initializing widget, set this property as shown below
 
var featuredReference = vidizmo.videos.channel('.featured-videos', {
 
 
 
 access_token: ‘MIOPASJDAHHQJWEJDKADHHAD’
});
 


 

 


Sample Code

 

<script type="text/javascript">
 var featuredReference = vidizmo.videos.channel(".featured-videos", {
 playback_page_url: "/Page.aspx?id=",
 details_page_url: "/Page.aspx?id="
 });
</script>
 

 


Events


Name
Description
on_search_completed
It is raised when search results have been received back as well as rendered on UI.
on_format_data
It occurs just before UI starts rendering. At this stage, data has been received and is available for any manipulation if there’s a need.  However this event expects data to be returned, otherwise, it will not be rendered on UI at all.
on_search_performing
It is raised when data is about to search.
on_pagging_clicked
It is raised when clicking on pagination.
on_item_clicked
It is raised when a particular item is clicked.
on_search_result
It is raised when data has been searched and UI is not rendered.

 

Sample Code

 

 
<script type="text/javascript">
 var featuredReference = vidizmo.videos.channel(".featured-videos", {
 on_format_data: function (data) {
 
 // this event is raised just before UI is rendered
 
 return data; // data contains video list that will be used for rendering and therefore must be returned
 },
 on_search_completed: function (searcher) {
 
 // this event is raised when search has rendered UI
 }
 });
</script>
 

 


To learn more how these Widgets work, click here on VIDIZMO Widgets API Implementation.

For a complete list of VIDIZMO APIs, click here on VIDIZMO Developer APIs.