| Platform | Since |
|---|---|
| Android | 0.9 |
| iPhone | 0.9 |
| iPad | 0.9 |
A native control for playing videos.
The video player is a native view that can be used to play videos, either stored locally or streamed from a web server. The player can occupy the full screen, or can be used as a view that can be added to other views.
Use the Titanium.Media.createVideoPlayer method to create a video player.
All platforms support specifying the video content as a URL, either to a local file or a remote stream. This is done by setting the url property.
On iOS, video content can also be specified as a Blob or File object using the media property.
On iOS, a video player can dynamically switch back and forth between fullscreen mode and standard mode. If the native video controls are displayed, the user can use them to switch between standard and fullscreen mode.
On Android, the video player cannot switch modes. To create a fullscreen player, you
must specify fullscreen: true when you create the player. This fullscreen player
creates its own Android Activity on top of the activity stack.
Unlike a normal view, this fullscreen video player appears as soon as it is created.
The user can close the player by pressing the Back button. See the code examples for
a sample using the fullscreen player on Android.
There are several known issues with clipping on the Android video player.
When used with scalingMode set to VIDEO_SCALING_ASPECT_FILL or VIDEO_SCALING_NONE,
the video content is not correctly clipped to the boundaries of the view.
(TIMOB-7628)
When a border is set on the view, the video content does not take the border width into account, so the video content covers the border. (TIMOB-7628)
If a borderRadius is specified, the video content is not clipped to the rounded corners. (TIMOB-7629)
The following code creates a simple video player to play a local video file.
var vidWin = Titanium.UI.createWindow({ title : 'Video View Demo', backgroundColor : '#fff' }); var videoPlayer = Titanium.Media.createVideoPlayer({ top : 2, autoplay : true, backgroundColor : 'blue', height : 300, width : 300, mediaControlStyle : Titanium.Media.VIDEO_CONTROL_DEFAULT, scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FIT }); videoPlayer.url = 'movie.mp4'; vidWin.add(videoPlayer); vidWin.open();
The Android fullscreen video player operates differently from other video players. The following example shows how to create, show, and close a fullscreen video player.
Note that in this example, a button is included to close the player, to demonstrate a method for dismissing the player programmatically. In practice, the user can always dismiss the player by using the Back button, so an on-screen control would not be required.
Titanium.UI.setBackgroundColor('#000'); var win = Titanium.UI.createWindow({ title : 'Test', backgroundColor : '#fff', exitOnClose : true }); // Change to a valid URL var contentURL = "http://www.example.com/stream.mp4"; var openButton = Ti.UI.createButton({ title : "Start Video", top : "0dp", height : "40dp", left : "10dp", right : "10dp" }); openButton.addEventListener('click', function() { var activeMovie = Titanium.Media.createVideoPlayer({ url : contentURL, backgroundColor : 'blue', movieControlMode : Titanium.Media.VIDEO_CONTROL_DEFAULT, scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL, fullscreen : true, autoplay : true }); var closeButton = Ti.UI.createButton({ title : "Exit Video", top : "0dp", height : "40dp", left : "10dp", right : "10dp" }); closeButton.addEventListener('click', function() { activeMovie.hide(); activeMovie.release(); activeMovie = null; }); activeMovie.add(closeButton); }); win.add(openButton); win.open();
| Name | Summary |
|---|---|
| add |
Adds a child to this view's hierarchy. |
| addEventListener |
Adds the specified callback as an event listener for the named event. |
| animate |
Animates this view. |
| cancelAllThumbnailImageRequests |
Cancels all pending asynchronous thumbnail requests. (iPhone, iPad only.) |
| convertPointToView |
Translates a point from this view's coordinate system to another view's coordinate system. |
| fireEvent |
Fires a synthesized event to any registered listeners. |
| getAllowsAirPlay |
Gets the value of the allowsAirPlay property. (iPhone, iPad only.) |
| getAnchorPoint |
Gets the value of the anchorPoint property. (iPhone, iPad only.) |
| getAnimatedCenterPoint |
Gets the value of the animatedCenterPoint property. |
| getAutoplay |
Gets the value of the autoplay property. |
| getBackgroundColor |
Gets the value of the backgroundColor property. |
| getBackgroundDisabledColor |
Gets the value of the backgroundDisabledColor property. (Android only.) |
| getBackgroundDisabledImage |
Gets the value of the backgroundDisabledImage property. (Android only.) |
| getBackgroundFocusedColor |
Gets the value of the backgroundFocusedColor property. (Android only.) |
| getBackgroundFocusedImage |
Gets the value of the backgroundFocusedImage property. (Android only.) |
| getBackgroundGradient |
Gets the value of the backgroundGradient property. |
| getBackgroundImage |
Gets the value of the backgroundImage property. |
| getBackgroundLeftCap |
Gets the value of the backgroundLeftCap property. (iPhone, iPad only.) |
| getBackgroundRepeat |
Gets the value of the backgroundRepeat property. (iPhone, iPad only.) |
| getBackgroundSelectedColor |
Gets the value of the backgroundSelectedColor property. (Android, Mobile Web only.) |
| getBackgroundSelectedImage |
Gets the value of the backgroundSelectedImage property. (Android, Mobile Web only.) |
| getBackgroundTopCap |
Gets the value of the backgroundTopCap property. (iPhone, iPad only.) |
| getBorderColor |
Gets the value of the borderColor property. |
| getBorderRadius |
Gets the value of the borderRadius property. |
| getBorderWidth |
Gets the value of the borderWidth property. |
| getBottom |
Gets the value of the bottom property. |
| getCenter |
Gets the value of the center property. |
| getChildren |
Gets the value of the children property. |
| getContentURL |
Gets the value of the contentURL property. |
| getCurrentPlaybackTime |
Gets the value of the currentPlaybackTime property. |
| getDuration |
Gets the value of the duration property. |
| getEndPlaybackTime |
Gets the value of the endPlaybackTime property. |
| getFocusable |
Gets the value of the focusable property. (Android only.) |
| getFullscreen |
Gets the value of the fullscreen property. |
| getHeight |
Gets the value of the height property. |
| getInitialPlaybackTime |
Gets the value of the initialPlaybackTime property. |
| getKeepScreenOn |
Gets the value of the keepScreenOn property. (Android only.) |
| getLayout |
Gets the value of the layout property. |
| getLeft |
Gets the value of the left property. |
| getLoadState |
Gets the value of the loadState property. |
| getMediaControlStyle |
Gets the value of the mediaControlStyle property. |
| getMediaTypes |
Gets the value of the mediaTypes property. (iPhone, iPad only.) |
| getMovieControlMode |
Gets the value of the movieControlMode property. (iPhone, iPad only.) |
| getNaturalSize |
Gets the value of the naturalSize property. (iPhone, iPad only.) |
| getOpacity |
Gets the value of the opacity property. |
| getPlayableDuration |
Gets the value of the playableDuration property. |
| getPlaybackState |
Gets the value of the playbackState property. |
| getPlaying |
Gets the value of the playing property. |
| getRepeatMode |
Gets the value of the repeatMode property. |
| getRight |
Gets the value of the right property. |
| getScalingMode |
Gets the value of the scalingMode property. |
| getSize |
Gets the value of the size property. |
| getSoftKeyboardOnFocus |
Gets the value of the softKeyboardOnFocus property. (Android only.) |
| getSourceType |
Gets the value of the sourceType property. (iPhone, iPad only.) |
| getTop |
Gets the value of the top property. |
| getTouchEnabled |
Gets the value of the touchEnabled property. |
| getTransform |
Gets the value of the transform property. |
| getUrl |
Gets the value of the url property. |
| getUseApplicationAudioSession |
Gets the value of the useApplicationAudioSession property. (iPhone, iPad only.) |
| getVisible |
Gets the value of the visible property. |
| getWidth |
Gets the value of the width property. |
| getZIndex |
Gets the value of the zIndex property. |
| hide |
Hides this view. |
| pause |
Pauses playing the video. |
| play |
Starts playing the video. |
| release |
Releases the internal video resources immediately. |
| remove |
Removes a child view from this view's hierarchy. |
| removeEventListener |
Removes the specified callback as an event listener for the named event. |
| requestThumbnailImagesAtTimes |
Asynchronously request thumbnail images for one or more points in time in the video. (iPhone, iPad only.) |
| setAllowsAirPlay |
Sets the value of the allowsAirPlay property. (iPhone, iPad only.) |
| setAnchorPoint |
Sets the value of the anchorPoint property. (iPhone, iPad only.) |
| setAutoplay |
Sets the value of the autoplay property. |
| setBackgroundColor |
Sets the value of the backgroundColor property. |
| setBackgroundDisabledColor |
Sets the value of the backgroundDisabledColor property. (Android only.) |
| setBackgroundDisabledImage |
Sets the value of the backgroundDisabledImage property. (Android only.) |
| setBackgroundFocusedColor |
Sets the value of the backgroundFocusedColor property. (Android only.) |
| setBackgroundFocusedImage |
Sets the value of the backgroundFocusedImage property. (Android only.) |
| setBackgroundGradient |
Sets the value of the backgroundGradient property. |
| setBackgroundImage |
Sets the value of the backgroundImage property. |
| setBackgroundLeftCap |
Sets the value of the backgroundLeftCap property. (iPhone, iPad only.) |
| setBackgroundRepeat |
Sets the value of the backgroundRepeat property. (iPhone, iPad only.) |
| setBackgroundSelectedColor |
Sets the value of the backgroundSelectedColor property. (Android, Mobile Web only.) |
| setBackgroundSelectedImage |
Sets the value of the backgroundSelectedImage property. (Android, Mobile Web only.) |
| setBackgroundTopCap |
Sets the value of the backgroundTopCap property. (iPhone, iPad only.) |
| setBackgroundView |
Sets the background view for customization which is always displayed behind movie content. (iPhone, iPad only.) |
| setBorderColor |
Sets the value of the borderColor property. |
| setBorderRadius |
Sets the value of the borderRadius property. |
| setBorderWidth |
Sets the value of the borderWidth property. |
| setBottom |
Sets the value of the bottom property. |
| setCenter |
Sets the value of the center property. |
| setContentURL |
Sets the value of the contentURL property. |
| setDuration |
Sets the value of the duration property. |
| setEndPlaybackTime |
Sets the value of the endPlaybackTime property. |
| setFocusable |
Sets the value of the focusable property. (Android only.) |
| setFullscreen |
Sets the value of the fullscreen property. |
| setHeight |
Sets the value of the height property. |
| setInitialPlaybackTime |
Sets the value of the initialPlaybackTime property. |
| setKeepScreenOn |
Sets the value of the keepScreenOn property. (Android only.) |
| setLayout |
Sets the value of the layout property. |
| setLeft |
Sets the value of the left property. |
| setMedia |
Sets the value of the media property. (iPhone, iPad only.) |
| setMediaControlStyle |
Sets the value of the mediaControlStyle property. |
| setMediaTypes |
Sets the value of the mediaTypes property. (iPhone, iPad only.) |
| setMovieControlMode |
Sets the value of the movieControlMode property. (iPhone, iPad only.) |
| setNaturalSize |
Sets the value of the naturalSize property. (iPhone, iPad only.) |
| setOpacity |
Sets the value of the opacity property. |
| setRepeatMode |
Sets the value of the repeatMode property. |
| setRight |
Sets the value of the right property. |
| setScalingMode |
Sets the value of the scalingMode property. |
| setSoftKeyboardOnFocus |
Sets the value of the softKeyboardOnFocus property. (Android only.) |
| setSourceType |
Sets the value of the sourceType property. (iPhone, iPad only.) |
| setTop |
Sets the value of the top property. |
| setTouchEnabled |
Sets the value of the touchEnabled property. |
| setTransform |
Sets the value of the transform property. |
| setUrl |
Sets the value of the url property. |
| setUseApplicationAudioSession |
Sets the value of the useApplicationAudioSession property. (iPhone, iPad only.) |
| setVisible |
Sets the value of the visible property. |
| setWidth |
Sets the value of the width property. |
| setZIndex |
Sets the value of the zIndex property. |
| show |
Makes this view visible. |
| stop |
Stops playing the video. |
| thumbnailImageAtTime |
Returns a thumbnail image for the video at the specified time. (iPhone, iPad only.) |
| toImage |
Returns an image of the rendered view, as a Blob. |
| Name | Type | Summary |
|---|---|---|
| allowsAirPlay | Boolean |
Whether or not the current movie can be played on a remote device. (iPhone, iPad only.) |
| anchorPoint | Point |
Anchor point where animation should occur, relative to the view's boundaries. (iPhone, iPad only.) |
| animatedCenterPoint | Point |
Current position of the view during an animation. read-only |
| autoplay | Boolean |
Indicates if a movie should automatically start playback. |
| backgroundColor | String |
Background color of the view. |
| backgroundDisabledColor | String |
Disabled background color of the view. (Android only.) |
| backgroundDisabledImage | String |
Disabled background image for the view, specified as a local file path or URL. (Android only.) |
| backgroundFocusedColor | String |
Focused background color of the view. (Android only.) |
| backgroundFocusedImage | String |
Focused background image for the view, specified as a local file path or URL. (Android only.) |
| backgroundGradient | Gradient |
A background gradient for the view. |
| backgroundImage | String |
Background image for the view, specified as a local file path or URL. |
| backgroundLeftCap | Number |
Size of the left end cap. (iPhone, iPad only.) |
| backgroundRepeat | Boolean |
Toggle for whether or not to tile a background across a view. (iPhone, iPad only.) |
| backgroundSelectedColor | String |
Selected background color of the view. (Android, Mobile Web only.) |
| backgroundSelectedImage | String |
Selected background image url for the view, specified as a local file path or URL. (Android, Mobile Web only.) |
| backgroundTopCap | Number |
Size of the top end cap. (iPhone, iPad only.) |
| borderColor | String |
Border color of the view. |
| borderRadius | Number |
Border radius of the view. |
| borderWidth | Number |
Border width of the view. |
| bottom | Number or String |
View's bottom position, in platform-specific units. |
| center | Point |
View's center position, in the parent view's coordinates. |
| children | Array<Titanium.UI.View> |
Array of this view's child views. read-only |
| contentURL | String |
Deprecated Use the url property instead. |
| currentPlaybackTime | Number |
Current playback time of the current movie in milliseconds. read-only |
| duration | Number |
The duration of the current movie in milliseconds, or 0.0 if not known. |
| endPlaybackTime | Number |
The end time of movie playback, in milliseconds. |
| focusable | Boolean |
Whether view should be focusable while navigating with the trackball. (Android only.) |
| fullscreen | Boolean |
Determines if the movie is presented in the entire screen (obscuring all other application content). |
| height | Number or String |
View height, in platform-specific units. |
| initialPlaybackTime | Number |
The start time of movie playback, in milliseconds. |
| keepScreenOn | Boolean |
Whether to keep the device screen on. (Android only.) |
| layout | String |
Specifies how the view positions its children. One of: 'absolute', 'vertical', or 'horizontal'. |
| left | Number or String |
View's left position, in platform-specific units. |
| loadState | Number |
Returns the network load state of the movie player. read-only |
| media | Titanium.Blob or Titanium.Filesystem.File or String |
Media object to play, as either a |
| mediaControlStyle | Number |
The style of the playback controls. |
| mediaTypes | Number |
The types of media in the movie, or |
| movieControlMode | Number |
Deprecated Use |
| naturalSize | MovieSize |
Returns the natural size of the movie. (iPhone, iPad only.) |
| opacity | Number |
Opacity of this view, from 0.0 (transparent) to 1.0 (opaque). |
| playableDuration | Number |
The currently playable duration of the movie, for progressively downloaded network content. read-only |
| playbackState | Number |
Current playback state of the video player. read-only |
| playing | Boolean |
Boolean to indicate if the player has started playing. read-only |
| repeatMode | Number |
Determines how the movie player repeats when reaching the end of playback. |
| right | Number or String |
View's right position, in platform-specific units. |
| scalingMode | Number |
Determines how the content scales to fit the view. |
| size | Object |
Rendered size of the view as a dictionary of width and height properties. read-only |
| softKeyboardOnFocus | Number |
Determines keyboard behavior when this view is focused. (Android only.) |
| sourceType | Number |
The playback type of the movie. (iPhone, iPad only.) |
| top | Number or String |
The view's top position. |
| touchEnabled | Boolean |
Whether view should receive touch events. |
| transform | Titanium.UI.2DMatrix or Titanium.UI.iOS.3DMatrix |
Transformation matrix to apply to the view. |
| url | String |
URL of the media to play. |
| useApplicationAudioSession | Boolean |
Indicates if the movie player should inherit the application's audio session instead of creating a new session. (iPhone, iPad only.) |
| visible | Boolean |
Boolean value indicating whether the view is visible. |
| width | Number or String |
View's width, in platform-specific units. |
| zIndex | Number |
Z index position relative to other sibling views. |
| Name | Summary |
|---|---|
| click |
Fired when the device detects a click against the view. (Android, Mobile Web only.) |
| complete |
Fired when movie playback ends or a user exits playback. |
| dblclick |
Fired when the device detects a double click against the view. |
| doubletap |
Fired when the device detects a double tap against the view. |
| durationAvailable |
Fired when the video duration is available. |
| error |
Fired when movie playback encounters an error. (Android, Mobile Web only.) |
| fullscreen |
Fired when a movie changes to or from fullscreen view. |
| load |
Fired when the movie play loads. |
| loadstate |
Fired when the network loadState changes. |
| longpress |
Fired when the device detects a long press. |
| mediaTypesAvailable |
Fired when the media types in the current movie are determined. (iPhone, iPad only.) |
| naturalSizeAvailable |
Fired when the natural size of the current movie is determined. (iPhone, iPad only.) |
| playbackState |
Fired when the playbackState changes. |
| playing |
Fired when the currently playing movie changes. |
| preload |
Fired when the movie has preloaded and is ready to play. (Android, Mobile Web only.) |
| resize |
Fired when the movie player is resized. (iPhone, iPad only.) |
| singletap |
Fired when the device detects a single tap against the view. (Android, Mobile Web only.) |
| sourceChange |
Fired when the sourceType property changes. (iPhone, iPad only.) |
| swipe |
Fired when the device detects a swipe gesture (left or right) against the view. |
| touchcancel |
Fired when a touch event is interrupted by the device. (Android, Mobile Web only.) |
| touchend |
Fired when a touch event is completed. (Android, Mobile Web only.) |
| touchmove |
Fired as soon as the device detects movement of a touch. (Android, Mobile Web only.) |
| touchstart |
Fired as soon as the device detects a touch gesture. |