Video player

The Video player control allows to reproduce video media files into your developed apps. This control offer several properties and methods in order to set the behaviour and made some related control task.

There is a VideoPlayer sample app included with the installation of DecSoft App Builder. Take a look to see this control in action!

Video player CSS rules

This control has a default style, and, some control JavaScript properties (see below), can also changes the control style, not to mention the Classes property, that you can use to establish one or more CSS classes to be applied to the control.

In addition to that style, you can also set custom CSS rules for the control by using the IDE controls style inspector. If this is not enough, you can include any number of CSS stylesheets in the app by using the app files manager.

If you want to use CSS stylesheets, you need to know how to refer to the control, so take a look at the Runtime selectors help topic.

Video player designtime properties

The Video player control put at your disposition the below designtime properties or variables. Designtime means here that these properties are only available in designtime and not in runtime.

Video player runtime properties

The Video player control put at your disposition the below runtime properties or variables. You can set almost all these variables in designtime, and, they are also available to be use when the app is running. Note that we named here these variables in a capitalized way, because is like you can see it in the designtime control's inspector, however, at runtime we use the lower camel case way.

Video player methods

The Video player control put at your disposition the below methods. You can use these methods in runtime in order to perform various control related tasks.

Video player events

The Video player control put at your disposition the below events handlers:

Video player designtime properties

Video player Top property

Designtime. Integer variable. The Top property stores the top position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Video player Left property

Designtime. Integer variable. The Left property stores the left position of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Video player Width property

Designtime. Integer variable. The Width property stores the width of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Video player Height property

Designtime. Integer variable. The Height property stores the height of the control in pixels. The pixels are relative to the app view, dialog or frame, and, is used "as is" if the app have the "Scale" app option is set to "false". Remember that this control property is only for designtime and is not available in runtime.

Video player Locked property

Designtime. Boolean variable. The Locked property determines if the control can be moved or resized in app view designer or not. Set a "false" value mean the control can be moved and resized. Set a "true" value (by default) mean the control cannot be moved nor resized. Remember that this control property is only for designtime and is not available in runtime.

Video player runtime properties

Video player Name property

Runtime. String variable. The Name control property stores the name of the Video player control as you set in designtime. The Name property value must be unique for the same app view, dialog or frame, that is, it's possible to have more than one "yourControlName" in the app, if that controls resides in different app views, dialogs or frames. Note that you must consider this variable as read only: change the name of a control in runtime can cause unexpected results.

Video player Event property

Runtime. Mixed variable. The Event control property stores the "event" variable received in all the control events. This variable can contain the target (HTML element of the control) that fire the event and more useful stuff.

Video player AutoPlay property

Runtime. Boolean variable. The AutoPlay control property can be set to "true" (it's "false" by default) at designtime in order to start the reproduction of the video when the app view is show. Note, however, that some platforms can refuse to play a video without the user intervention. Some platforms allows autoplayed videos only if muted. You can mute the video using the Muted property.

Video player Controls property

Runtime. Boolean variable. The Controls control property determines if the default player controls (play, stop buttons, seek bar, etc.) must be shown or not. This property is "true" by default but you can set to "false" in order to hide the default player controls. Remember that it's possible to control the player reproduction using the available control methods.

Video ImageFit property

Runtime. String variable. The ImageFit determines how the video is show even if the app "Scale" option is set to "true". You can use one of the available "app.imageFit.*" constants to set this property, which is "cover" by default.

Video player Loop property

Runtime. Boolean variable. The Loop control property determines if the media player must start to reproduce the media file again and again after their complete reproduction. This property is "false" by default but you can set to "true" in order to loop the player reproduction.

Video player Muted property

Runtime. Boolean variable. The Muted control property determine if the reproduction sound must be muted. This variable is "false" by default but you can set to "true" to mute the sound. This property can be useful to use with the AutoPlay property for platforms and browsers that allows autoplayed video, but only if they are muted.

Video player Sources property

Runtime. Array of objects variable. The Sources control property allows to specify more than one differents video media source files to be used. The browser or platform can then pick one of then in order to be reproduced.

You can set the Sources property at designtime using the Media sources dialog, or, can set it un runtime using the appendSource() method.

Note that, after the Sources property has been filled we cannot change the Video player source (to be reproduced) using this property: when we need this we must manually set the Source property or by using the setSource() method.

Video player Source property

Runtime. Object variable. The Source control property allows to set the current media file source to be reproduced in the Video player. We can set this property manually or by using the setSource() method.

A source object is composed with the below properties:

Name Type Description
url String The media file URL to be set as the source of the Video player.
type String The media file type / codec to be used. This property is optional, and, if not provided, the browser or platform try to automatically detect the media type and codec to be use.

Video player Volume property

Runtime. Number variable. The Volume control property stores the current Video player sound volume, which can be a value between 0 and 1. You can check this property to know the current volume level. To set the Video player sound volume, however, you must use the setVolume() method.

Video player Duration property

Runtime. Number variable. The Duration control property stores the length of the media file in seconds. This property is available after the DurationChange event has been fired.

Video player CurrentTime property

Runtime. Number variable. The CurrentTime control property stores the current reproduction position in seconds. This property is available after the TimeUpdate event has been fired.

Video player Paused property

Runtime. Boolean variable. The Paused control property determine if the Video player reproduction has been paused or not. This property has a "true" value if the reproduction is paused, or "false" if not.

Video player Error property

Runtime. Object variable. The Error control property stores information about the last error while fetching the media data. This property is available in the Error event and it's an object with the below properties. Note, however, that it's possible that the Error property was "null" in some cases.

Name Type Description
code Number The error code.
message String The error message.

Video player Title property

Runtime. String variable. The Title control property stores some small but descriptive text, mainly to be used to be show that text when the user place the mouse cursor into the control.

Video player Classes property

Runtime. String variable. The Classes control property stores one or more additionals CSS classes (space separated) to be applied to the control.

Video player Hidden property

Runtime. Boolean variable. The Hidden control property determines if the control appear visible to the user or not. Set to "true" to hide the control, or to "false" to show the control (by default).

Video player runtime methods

Video player play() method

Runtime method. You can use this Video player control method to start to play the video media file. This method do not require any argument.

Video player pause() method

Runtime method. You can use this Video player control method to pause a previously started reproduction of the video media file. This method do not require any argument.

Video player stop() method

Runtime method. You can use this Video player control method to stop a previously started reproduction of the video media file. This method do not require any argument.

Video player seek() method

Runtime method. You can use this Video player control method to go to certain specific position in the video reproduction. This method requires the below argument:

Name Type Description
seconds Number The specific seconds to seek the video.

Video player setVolume() method

Runtime method. You can use this Video player control method to set the audio volume of the video reproduction. This method requires the below argument:

Name Type Description
volume Number A number between 0 and 1 that represent the volume level to be set.

Video player setSource() method

Runtime method. You can use this Video player control method to set the source of the Video player at runtime. Remember that, once the Sources property is established the at designtime or in runtime, we need to use the Source property in order to change the source of the Video player: you can use this method to establish the Source property. This method requires the below arguments:

Name Type Description
mediaUrl String The media file URL to be set as the source of the Video player.
mediaType String The media file type / codec to be used. This argument is optional, and, if not provided, the browser or platform try to automatically detect the media type and codec to be use.

Video player appendSource() method

Runtime method. You can use this Video player control method to append a new media source into the Sources property at runtime. Remember that you can set the Sources property at designtime. You can use this method to fill the Sources property at runtime, however, once the Sources has been established, you must use the setSource() method to change the Video player source.

Name Type Description
mediaUrl String The media file URL to be set as the source of the Video player.
mediaType String The media file type / codec to be used. This argument is optional, and, if not provided, the browser or platform try to automatically detect the media type and codec to be use.

Video player events

Video player CanPlay event

The CanPlay event handler is fired when the browser or platform can resume playback of the media data, but estimates that if playback were to be started now, the media resource could not be rendered at the current playback rate up to its end without having to stop for further buffering of content. See the CanPlayThrough event. See also the available events variables.

Video player CanPlayThrough event

The CanPlayThrough event handler is fired when the browser or platform estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering. See also the available events variables.

Video player Play event

The Play event handler is fired when the Video player is no longer paused. It's fired after the play() method has returned, or when the AutoPlay property has caused playback to begin. See also the available events variables.

Video player Pause event

The Pause event handler is fired when the Video player has been paused. It's fired after the pause() method has returned. See also the available events variables.

Video player DurationChange event

The DurationChange event hander is fired when the Duration property has just been updated. See also the available events variables.

Video player TimeUpdate event

The TimeUpdate event hander is fired when the current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. See the CurrentTime property. See also the available events variables.

Video player Ended event

The Ended event hander is fired when the playback has stopped because the end of the media source was reached. See also the available events variables.

Video player Seeking event

The Seeking event hander is fired when the browser or platform has started seeking to a new position. See the seek() method. See also the available events variables.

Video player Seeked event

The Seeked event hander is fired after the current playback position was changed. See the seek() method. See also the available events variables.

Video player VolumeChange event

The VolumeChange event hander is fired after the Volume property or the Muted property was changed. See the setVolume() method. See also the available events variables.

Video player Error event

The Error event hander is fired when an error occurs while fetching the media data. See the Error property. See also the available events variables.

Video player Click event

The Click event handler is fired when the user click or tap into the Video player control. See also the available events variables.

Video player DblClick event

The DblClick (Double Click) event handler is fired when the user double click or double tap into the Video player control. See also the available events variables.

Video player MouseUp event

The MouseUp event handler is fired when the user up the mouse into the Video player control. See also the available events variables.

Video player MouseDown event

The MouseDown event handler is fired when the user down the mouse into the Video player control. See also the available events variables.

Video player MouseMove event

The MouseMove event handler is fired when the user move the mouse into the Video player control. See also the available events variables.

Video player MouseEnter event

The MouseEnter event handler is fired when the user enter the mouse into the Video player control. See also the available events variables.

Video player MouseLeave event

The MouseLeave event handler is fired when the user leave the mouse from the Video player control. See also the available events variables.

Video player ContextMenu event

The ContextMenu event handler is fired when the browser must shown the context menu of the the Video player control, which occur when the user click with the right mouse button into the Video player control. See also the available events variables.

Video player events variables

The below JavaScript variables are available in all the referred Video player control events handlers:

Name Type Description
event Mixed This variable is received in almost all control events. You can use this variable to stop the propagation of the event, to access the HTML element who fire the event and more.
self Object Stores the control object. This is a shortcut to the control variable, and it's available since we are talking about specific control events.
view Object

Stores the current app view or dialog. This variable allow us to access to that view or dialog properties and methods and also their controls properties and methods. For example, you can access to a control properties using the variable "view.yourControlName", suposing the control is named "yourControlName".

views Object Stores all the loaded app views. Note that loaded views mean that the app views has been previously show to the user. It's possible to access to the app view controls properties like "views.view1.yourControlName", suposing the view is named "view1" and the control is named "yourControlName". In the same way we can access to other controls of the view and to other loaded views and their controls.
frames Object Stores all the app frames. You can use this variable to access to all the app frames and their controls.
dialogs Object Stores all the app dialogs. You can use this variable to access to all the app dialogs and their controls.
app Object Stores all the app properties and methods. You can use this variable to access to all the app properties and app methods.