In this chapter, you'll learn how you can embed videos within your apps. You'll see how to play both local files and how to stream remote videos.
You can use the
Titanium.Media.VideoPlayer to play videos in your Titanium app. This object is returned when you call
Titanium.Media.createVideoPlayer() . It provide useful methods, such as
You can play local video files by calling the
setMedia() method or by setting the
media property. Either accepts a File or Blob object. You can play a remote video by calling the
setUrl() method or by setting the
url property. Either accepts the URL of the media to play. (There's also a deprecated contentURL property, but you should use
url instead.) Finally, you can set the
autoplay property to
true to automatically play the video when the VideoPlayer is rendered.
The VideoPlayer is treated like a regular Titanium View. Thus, you can overlay images and views over the VideoPlayer by adding them to the view hierarchy. Like this:
Fullscreen and embedded players
On Android, the VideoPlayer must be used fullscreen. It cannot be embedded into a smaller view. This is because on Android, the VideoPlayer is not technically a proxy for a native view object like it is on iOS. Instead, creating the VideoPlayer fires an Intent which launches the native video player Activity. It's for this reason that on Android, you don't call
win.add(videoPlayer). If you did so, your app would throw an error and crash.
On iOS, you can embed the video player within a window or view; it doesn't have to be shown full size. Simply set
width properties on the VideoPlayer. To display the player fullscreen, you can set
You can control the way in which the video playback controls are shown for the player. You can "embed" the within the player, which removes them from the player's surrounding chrome giving more space to your video. You do so by setting the
movieControlStyle property, like this
The VideoPlayer supports quite a few events that you can use to control the playback experience. See the
Ti.Media.VideoPlayer API docs page for full information. But here are a few of the events you might monitor:
complete– fired when the playback ends or the user exits playback, use the
e.reasonproperty to determine the actual stop condition, such as
load– fired when the movie finishes loading
fullscreen– fired when the movie changes to or from fullscreen, use the
e.enteringproperty to determine if the player is entering or leaving fullscreen mode
A technique you should consider is stopping the movie when the video it's embedded in closes. You can do that simply with code like this:
In this activity, you will write a simple app to stream a movie from a remote URL.
- Create a new Titanium Mobile app. Delete all of the code from the app.js file.
- Define a window with a black background. Optionally, set the orientation of the window to landscape.
- Define a VideoPlayer with these characteristics:
- backgroundColor = black
- default video controls (not embedded)
- scalingMode = fill the screen
- Play the http://assets.appcelerator.com.s3.amazonaws.com/video/media.m4v movie. Depending on your Android environment, that movie might not play well (due to encoding issues from the creation process). If you have playback troubles, you can play http://assets.appcelerator.com.s3.amazonaws.com/video/media.3gp on Android instead.
- Add the branching logic so that on iOS you add the VideoPlayer to the window object.
- Add the code to play the video stream and open the window.
- Build and test your app in the simulator/emulator or on device.
Windows development considerations
In order to enable camera and audio recording for Windows Phone, you need to provide appropriate Capabilities in your
tiapp.xml. Windows Phone users are prompted to grant or deny permission when your application attempt to use it.
Grant access to video stream and audio stream
Grant access to music library
References and further reading
- Finished code
- API docs: Ti.Media.VideoPlayer
- iOS Developer Docs: Supported video formats
- Android Developer Docs: Supported media formats
- Windows 10 Mobile: Audio, video, and camera
In this chapter, you learned how you can embed videos within your apps. You saw how to play both local files and how to stream remote videos.