How to use the Feathers
VideoPlayer class provides video playback capabilities using a
flash.net.NetStream object. Video files may be loaded from a URL and displayed as a Starling texture. Media player controls may be added as children to display information such as the current time or to control playback by seeking or pausing the audio.
VideoPlayer is a subclass of
LayoutGroup, so its children may be positioned and sized using layouts.
First, let's create a
VideoPlayer component, set its dimensions, and add it to the display list:
To play a video file, pass the URL to the
To display the video, we need to add an
ImageLoader as a child of the
Notice that we have not set the
source property of the
ImageLoader yet. A video texture requires a moment to initialize on the GPU before it may be rendered by Starling. The
VideoPlayer will dispatch
Event.READY once we can pass the texture to the
The video texture may be accessed throught the
texture property. Until
Event.READY is dispatched, the
texture property of the
VideoPlayer will be
Additionally, you should listen for
This event is dispatched when the video texture has been disposed, and it must no longer be rendered.
Let's give the
VideoPlayer some controls. First, let's create a
LayoutGroup to use as a toolbar for our controls:
With the toolbar in place, let's add a
PlayPauseToggleButton and a
SeekSlider. It's as simple as adding them as children of the tool bar:
There's no need to add event listeners for these controls. You simply need to add them as children of the
VideoPlayer (or a container that has been added as a child of the
VideoPlayer), and everything will be set up automatically.
In the next section, we'll position everything with some layouts.
First, let's create a layout for the toolbar with our controls. We'll pass a
HorizontalLayout to the
Here, we've set the
gap property, but
HorizontalLayout provides many more useful features, including padding and alignment. See How to use
HorizontalLayout with Feathers containers for complete details.
If we want our
SeekSlider to stretch to fill as much space as possible within the
VideoPlayer, we can pass in
Now, because we set the
percentWidth property, when the width of the toolbar changes, the width of the
SeekSlider will change too.
Next, we want to position the toolbar and the
ImageLoader. Let's use a
VerticalLayout for that.
We want the
ImageLoader to fill as much space as possible.
Then, we want the toolbar to fill the entire width of the
Controlling playback programmatically
By default, the
VideoPlayer will automatically start playing its
videoSource. We can use the
autoPlay property to change this behavior:
autoPlay is set to
false, we can call
play() to begin playback manually:
To pause, we can call
pause() to pause playback at the current position:
togglePlayPause() method may be called to toggle between the play and pause states:
To stop playback and return the video to the beginning, we may call
seek() function may be called to change the current time:
The time is measured in seconds.
To change the volume, we can pass a
flash.media.SoundTransform object to the
toggleFullScreen() function will toggle between normal and full screen modes:
VideoPlayer is displayed in full screen mode, it will be added as a modal pop-up above all Starling content.
Previously, we loaded a video using a simple URL. Let's look at all of the ways that video may be loaded by the
Loading from URLs
First, we'll review how to load a video from a URL:
Loading from the file system
In Adobe AIR, we can also load a video from the file system:
Be sure to pass the
url property of a
flash.filesystem.File object to
videoSource. Attempting to use the
nativePath property will not work.
Finally, we can stream a video from a server, such as Adobe Media Server or the open source Red5 Media Server. First, we want to use the
netConnectionFactory property of the video player to set up the connection to the server:
Next, we'll pass the name of the stream to the
To play another video stream from the same server, set the
videoSource property again.
As mentioned above,
VideoPlayer is a subclass of
LayoutGroup. For more detailed information about the skinning options available to
VideoPlayer, see How to use the Feathers