Titanium.Media.VideoPlayer

Object of Titanium.Media.
Platform Since
Android 0.9
iPhone 0.9
iPad 0.9

Summary

A native control for playing videos.

Description

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.

Platform Implementation Notes

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)

Code Examples

Simple Video Player Example

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();

Android Fullscreen Video Player

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();

Methods

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.

Properties

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 File, a Blob, or a URL. (iPhone, iPad only.) write-only

mediaControlStyle Number

The style of the playback controls.

mediaTypes Number

The types of media in the movie, or Titanium.Media.VIDEO_MEDIA_TYPE_NONE if not known. (iPhone, iPad only.)

movieControlMode Number

Deprecated Use mediaControlStyle instead. (iPhone, iPad only.)

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.

Events

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.