Video Widget
The Video widget helps to play the video files captured using the device's camera, videos from the app resources, and from the servers/ websites by streaming data within a form. The Video widget can be added only to the FlexContainer, FlexScrollContainer, and FlexForm.
Following are a few real-time use cases of Video widget:
- Advertisements and Promotions: Promotional videos are played multiple times in gaming applications, news applications, and websites.
- Greetings: Videos like new greetings, Christmas greetings are played in a browser or an application.
- Instructional purposes: Instructional videos are created primarily for educational purposes.
Widgets are normally added to your application using Quantum Visualizer, but can also be added from code. For general information on using widgets in Quantum Visualizer, see Designing an Application in the Visualizer User Guide.
For general information on the Video widget see the Video topic in the Quantum Visualizer User Guide.
This widget supports drag and drop of videos for iOS 11 on iPad.
The Video widget capabilities can be broadly categorized into the following:
- Layout
- Video Controls
- 3D Touch
- User Input Handling
- Animations
- UI Appearance
- Enabling RTL
- Miscellaneous
- Configurations Common To All Widgets
Layout
| Properties | Description |
|---|---|
| anchorPoint | Specifies the anchor point of the widget bounds rectangle using the widget's coordinate space. |
| bottom | Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container. |
| centerX | Determines the center of a widget measured from the left bounds of the parent container. |
| centerY | This property determines the center of a widget measured from the top bounds of the parent container. |
| containerWeight | Specifies percentage of width to be allocated by its parent widget. |
| height | Determines the height of the widget and measured along the y-axis. |
| left | Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container. |
| maxHeight | Specifies the maximum height of the widget and is applicable only when the height property is not specified. |
| maxWidth | Specifies the maximum width of the widget and is applicable only when the width property is not specified. |
| minHeight | Specifies the minimum height of the widget and is applicable only when the height property is not specified. |
| minWidth | Specifies the minimum width of the widget and is applicable only when the width property is not specified. |
| right | Determines the lower right corner of the widget and is measured from the right bounds of the parent container. |
| top | Determines the top edge of the widget and measured from the top bounds of the parent container. |
| width | Determines the width of the widget and is measured along the x-axis. |
| zIndex | Specifies the stack order of a widget. |
| Events | Description |
|---|---|
| doLayout | Used to set the layout properties of child widgets in the relation to self and peer widgets whose layout is not yet performed. |
Video Controls
Methods | Description |
|---|---|
| getBufferPercentage | Returns the amount of the video buffered or played so far in percentage (0-100). |
| getCurrentPosition | Returns the playing time of the current position of the video. |
| getDuration | Returns the duration of the video playing currently. |
| isPlaying | Returns whether or not the video is playing. |
| pause | Pauses the video that is playing. |
| play | Plays the video. |
| resume | Resumes play of a video that is paused. |
| seekTo | Plays the video from a specific time. |
| setSource | Allows you to modify the video source. |
| setTracks | Allows you to assign or modify video captions. |
| stop | Stops the video that is playing. |
| Properties | Description |
|---|---|
| controls | Specifies whether to display the video controls or not. |
| enableCaptions | Specifies the visibility of captions for a video that is playing. |
| tracks | Specifies the tracks or captions of a playing video. |
| videoGravity | Specifies how to render a video content inside the widget. |
| volume | Specifies the current volume of the audio of the video. |
3D Touch
| Methods | Description |
|---|---|
| registerForPeekandPop | Registers a widget to enable 3D Touch peek and pop gestures. |
| setOnPeek | Sets and overrides the existing onPeekCallback for the widget. |
| setOnPop | Overrides the existing onPopCallback for the widget. |
| unregisterForPeekandPop | Unregisters a widget from 3D Touch peek and pop gestures. |
User Input Handling
| Methods | Description |
|---|---|
| addGestureRecognizer | Allows you to set a gesture recognizer for a specified gesture for a specified widget. |
| removeGestureRecognizer | Allows you to remove the specified gesture recognizer for the specified widget. |
| setGestureRecognizer | Allows you to set a gesture recognizer for a specified gesture for a specified widget. |
| Events | Description |
|---|---|
| onScrollWidgetPosition | Invoked by the platform when the widget location position gets changed on scrolling. |
Animations
| Methods | Description |
|---|---|
| animate | Applies an animation to the widget. |
| Properties | Description |
|---|---|
| transform | Contains an animation transformation that can be used to animate the widget. |
| widgetSwipeMove | Used to enable and configure the left or right swipe actions for a widget. |
UI Appearance
| Properties | Description |
|---|---|
| margin | Defines the space around a widget. |
| opacity | Specifies the opacity of the widget. |
| padding | Defines the space between the content of the widget and the widget boundaries. |
| poster | You can specify an image which is to be displayed as a poster or as a starting image for the video. |
| skin | Specifies the look and feel of the video. |
| widgetAlignment | Indicates how a widget is to be anchored with respect to its parent. |
Enabling RTL
| Properties | Description |
|---|---|
| retainContentAlignment | Helps to retain the content alignment of the widget while applying RTL. |
| retainFlexPositionProperties | Helps to retain the left, right and padding properties while applying RTL. |
| retainFlowHorizontalAlignment | Enables you to change the horizontal flow of the widget from left to right. |
Miscellaneous
| Properties | |
|---|---|
| cursorType | Specifies the type of the mouse pointer used. |
| source | Specifies the URLs of a video that is to be streamed, the path of the video from the local asset, and the video captured from the camera. |
| text | Specifies a general or descriptive text for the Video widget. |
| Method | Description |
|---|---|
| getBadge | Enables you to read the badge value (if any) attached to the specified widget. |
| setBadge | Enables you to set the badge value to the given widget at the upper, right corner of the widget. |
| Events | Description |
|---|---|
| onCompletion | Invoked when playback is completed. |
| onError | Invoked when an error occurred in setup or playback. |
| onPrepared | Invoked when the media file is loaded and ready to play. |
Configurations Common To All Widgets
| Properties | Description |
|---|---|
| accessibilityConfig | Enables you to control accessibility behavior and alternative text for the widget. |
| enable | Allows you to make a widget visible but not actionable. |
| id | id is a unique identifier of a Video consisting of alpha numeric characters. |
| info | A custom JSObject with the key value pairs that a developer can use to store the context with the widget. |
| isVisible | Controls the visibility of the Video widget on the form. |
| parent | Helps you access the parent of the widget. |
| Method | Description |
|---|---|
| convertPointFromWidget | Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system). |
| convertPointToWidget | Allows you to convert the coordinate system from a point to widget. |
| removeFromParent | Allows you to remove a child widget from a parent widget. |
| setEnabled | Specifies the widget that must be enabled or disabled. |
| setFocus | Specifies the widget on which there must be focus. |
| setVisibility | Set the visibility of the widget. |
Video Widget Basics
Creating a Video Using a Constructor: kony.ui.Video
var video = new kony.ui.Video (config);
Example
//Defining the properties for Video with source
var video1 = new kony.ui.Video({
"id": "video1",
skin: "vSkin",
"controls": false,
"width": "100%",
"height": "100%",
"zIndex": 3,
"source": {
"mp4": "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
"mov": videofilepath,
"rawBytes": camera1.rawBytes
},
"poster": null,
"onPrepared": onPreparedCallBack
});Limitations
- The Video Widget does not work in the DEBUG mode. It works only in the RELEASE mode.
Desktop Web
Following are the important considerations for the Desktop Web platform :
- Ensure that you place any local videos in the
<app name>/resources/desktop/commonfolder of your Workspace. - Local videos do not appear when you use the Live Preview option. To view local videos, you must Build and Publish the app.
iOS
The following are the important considerations for the iOS platform:
- If you add Video widgets to your apps using the kony.ui.video API (dynamically), at least one Video widget must be added from the default library on a form in your application. If all Video widgets are added to the app using the kony.ui.video API, videos will not play on the app.