Titanium.Media.VideoPlayer

viewAndroidiPhoneiPadmacOSsince 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.

iOS Implementation Notes

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.

Android Implementation Notes

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)

On Android, using a video player inside a scroll view is not recommended. When scrolling, black bars may appear over the video content.

This is because the video player is rendered on a special Android UI element called a SurfaceView. Android renders the SurfaceView behind the main window and punches a hole in the window to reveal the video. Because the content of the SurfaceView does not reside in the application window, the video content cannot be transformed (moved, scaled or rotated) with the window. This makes it difficult for the content to render properly inside a ScrollView.

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_RESIZE_ASPECT
});

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.

var win = Titanium.UI.createWindow({
    title: 'Test',
    backgroundColor: '#fff'
});

// 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',
        mediaControlStyle: Titanium.Media.VIDEO_CONTROL_DEFAULT,
        scalingMode: Titanium.Media.VIDEO_SCALING_RESIZE_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();

Alloy XML Markup

Previous simple example as an Alloy view.

simplevideoplayer.xml:

<Alloy>
    <Window id="vidWin" title="Video View Demo" backgroundColor="#fff">
        <VideoPlayer id="videoPlayer" ns="Ti.Media" top="2" url="/movie.mp4"
                      height="300" width="300" backgroundColor="blue" autoplay="true" />
    </Window>
</Alloy>

Properties 98

accessibilityDisableLongPress

BooleanAndroidsince 12.4.0

Parameters	Type	Description
name	String	Name of the event.
callback	Callback<Titanium.Event>	Callback function to invoke when the event is fired. 4 fields bubbles Boolean True if the event will try to bubble up if possible. cancelBubble Boolean Set to true to stop the event from bubbling. source Object Source object that fired the event. type String Name of the event fired.

Parameters	Type	Description
animation	Titanium.UI.Animation \| Dictionary<Titanium.UI.Animation>	Either a dictionary of animation properties or an Animation object.
callback?	Callback<Object>	Function to be invoked upon completion of the animation.

Parameters	Type	Description
point	Point	A point in this view's coordinate system. If this argument is missing an `x` or `y` property, or the properties can not be converted into numbers, an exception will be raised.
destinationView	Titanium.UI.View	View that specifies the destination coordinate system to convert to. If this argument is not a view, an exception will be raised.

Parameters	Type	Description
times	Array<Number>	Array of time values, representing offsets into the video, in seconds.
option	Number	Video time precision.
callback	Callback<ThumbnailResponse>	Callback to invoke when a thumbnail is available. 3 fields code Number Error code. Returns `0` if `success` is `true`. image Titanium.Blob Thumbnail image, as a `Blob`. time Number Time offset for the thumbnail, in seconds.

Parameters	Type	Description
callback?	Callback<Titanium.Blob>	Function to be invoked upon completion. If non-null, this method will be performed asynchronously. If null, it will be performed immediately.
honorScaleFactor?	Boolean	Determines whether the image is scaled based on scale factor of main screen. (iOS only) When set to true, image is scale factor is honored. When set to false, the image in the blob has the same dimensions for retina and non-retina devices.

Event properties	Type	Description
y	Number	Y coordinate of the event from the `source` view's coordinate system.
x	Number	X coordinate of the event from the `source` view's coordinate system.

Event properties	Type	Description
reason	Number	Reason that playback ended.
success	Boolean	Indicates if the video was played successfully. User exit counts as a success. Returns `true` if `reason` is not VIDEO_FINISH_REASON_PLAYBACK_ERROR, `false` otherwise.
error	String	Error message, if any returned. Will be undefined if `success` is `true`.
code	Number	Error code. Error code will be 0 if `success` is `true`, nonzero otherwise. If the error was generated by the operating system, that system's error value is used. Otherwise, this value will be -1.

Event properties	Type	Description
message	String	Reason for error as a string.
success	Boolean	Indicates a successful operation. Returns `false`.
error	String	Error message, if any returned. May be `undefined`.
code	Number	Error code. If the error was generated by the operating system, that system's error value is used. Otherwise, this value will be `-1`.

Event properties	Type	Description
direction	String	Direction of the swipe--either 'left', 'right', 'up', or 'down'.
x	Number	X coordinate of the event's endpoint from the `source` view's coordinate system.
y	Number	Y coordinate of the event's endpoint from the `source` view's coordinate system.
obscured	Boolean	Returns `true` if the swipe passed through an overlapping window belonging to another app. This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.

Examples

Simple Video Player Example

Android Fullscreen Video Player

Alloy XML Markup

Properties 98

Linear and Radial Gradients

Methods 23

Events 23