Video

• Graphics Link

Definition

<cst-video>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-options />

<sub-help-icon/>

<sub-feature-flag/>

</cst-video>

OR

<cst-element name="video" schema="" schema-prop=""/>

Example

<cst-video id="" src="" autoplay="" controls="" loop="" muted="" poster="" preload="">

<sub-theme name="" clr-var1="" clr-var2=""/>

<sub-font name="" font-var1="" font-var2=""/>

<sub-style name="" width="" height=""/>

<sub-access can-view="" can-modify=""/>

<sub-options />

<sub-help-icon name="" position="" title="" link="">

<sub-feature-flag >

</cst-video>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
src	string type	Specifies the URL of the video file
autoplay	boolean type	Specifies that the video will start playing as soon as it is ready
controls	boolean type	Specifies that video controls should be displayed (such as a play/pause button etc).
loop	number type	Specifies that the video will start over again, every time it is finished
muted	boolean type	Specifies that the audio output of the video should be muted
poster	string type	Specifies an image to be shown while the video is downloading, or until the user hits the play button
preload	string type(auto/metadata/none)	Specifies if and how the author thinks the video should be loaded when the page loads
disabled	boolean type	Specifies if component should be disabled.(aurelia ext attribute)
class	cst-video	Specifies class to be applied(Multiple classes can be given with space).
sub-theme	object type	Specifies theme to be used for component.
sub-font	object type	Specifies fonts to be used for component.
sub-style	object type	Specifies style to be applied to component.
sub-options	object type	Specifies the options of the component.
sub-help-icon	object type	Specifies help icon to be displayed.
sub-feature-flag	object	Specifies what features to enable/disable.
other	any type	Any other info.
schema	object type	Specifies JSON schema.
schema-prop	string type	Specifies property to be used to pick schema.

Sub element attributes

sub-theme

Property	Value	Description
name	primary(default)/secondary/custom	Name of the theme.
clr-label	string type	If custom then specific/ named color variables

sub-font

Property	Value	Description
name	roboto (default)/custom	Name of the font
font-text	string type	If custom then specific/ named font variables.
font-label	string type
font-error	string type

sub-style

Property	Value	Description
name	Design name	Name of design to be used.
width	percentage/pixels/string(x-small,small,medium,large,x-large)	Gives width/any other prop value

sub-help-icon

Property	Value	Description
name	string type	Icon name.
position	left/right	Position of the icon.
title	string type	Icon tooltip
link	string type	Link to be opened on click.

sub-feature-flag

Property	Value	Description

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let schema = {

type: "object",

required: ["video"], //= required

properties: {

video: {

type: "string",

title:"Video",//= label

cstAttr: {

raw:{ //loop & add to element

autoplay: true,

controls: true,

loop: 3,

muted: true,

poster: '<poster-url>',

preload: 'auto',

src: '<video-path>',

disabled : true,

class:'outline cst-class1'

},

subStyle:{ //loop & add to element style

name: '', // Default star

width:'',

height:'',

fontSize:''

},

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subFeatureFlag: {

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

},

itemsSource: '', //to check in page object

itemsSourceAPI: '',

}

}

}

}

let schemaProp = 'video';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Exact schema

let schema = {

type: "string",

title: "Video", //= label

cstAttr: {

}

}

let schemaProp = '';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.video';

var finalSchema = schema;

let schemaPropSplits = schemaProp.split('.');

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Material Measurement Guidelines

Events

Attribute	Description
onplayclick	Fires when the play button click.
onpauseclick	Fires when the pause button click.
onnextclick	Fires when the next button click.
onpreviousclick	Fires when the previous button click.
onreverseclick	Fires when the reverse button click.
onforwardclick	Fires when the forward button click.
onprogressclick	Fires when click on progress bar.
onprogresshover	Fires when hover on progress bar.
onprogresshoverleave	Fires when hover leave on progress bar.
onhover	Fires when the element's value hover.
onhoverleave	Fires when the element's value hover leave.
oninvalid	Script to be run when an element is invalid.

Event Method signature

method(parentRefObj, evtObj, elm, others)

Parameters description

Parameter	Value	Description
parentRefObj	parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext }	Parent Context references
evtObj	object	Event object
elm	object	Element value
others	any	Other value

OverRidable Classes

• cst-ovr-video
• cst-ovr-video-txt

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Features

• Display video in video section
• Play, pause, next, previous, reverse, forward button click functionality is there