Video Widget

You are here: Creating a Video Using a Constructor: voltmx.ui.Video

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 Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Iris User Guide.

For general information on the Video widget see the Video topic in the Volt MX Iris 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.

Creating a Video Using a Constructor: voltmx.ui.Video


var video = new voltmx.ui.Video (config);

Example

//Defining the properties for Video with source
var video1 = new voltmx.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.

iOS

The following are the important considerations for the iOS platform:

If you add Video widgets to your apps using the voltmx.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 voltmx.ui.video API, videos will not play on the app.

SPA

The following are the important considerations for the SPA platform:

When the form contains dockable components such as headers , footers, or an Appmenu, scrolling the video widget on iPhone or iPad does not scroll the form. This is due to a limitation that iPhone video controls do not respond to (custom) touch events when media controls are present.To avoid this, apply left or right margins to the either side of the video widget to enable scrolling of the form as well.
If you have two videos in a form, you can only play one at a time.

Supported devices and video formats for SPA platform.

Category and Device	OS	Browser	Video Format(WebM, OGG, MP4, OGV)	XHTML Mandatory Attributes Height/Width
Samsung Galaxy S2 - amsung I9100	Android 2.3.3	Native Android Webkit	MP4	na
Samsung Galaxy S2 - Samsung I9100	Android 4.0.4	Native Android Webkit	MP4	na
Samsung Galaxy S2 - amsung I9100	Android 4.0.4	Native Android Webkit	MP4	na
iPhone - iPhone	iOS 4.2.1	Safari	MP4	na
iPhone - iPhone	iOS 6.1.3	Safari	MP4	na