Menu
▾
▴
Spark VideoPlayer
There is a newer version of this page. You can find it here.
# Spark VideoPlayer - Functional and Design Specification
----
## Glossary
----
FLVPlayback VideoPlayer - fl.video.VideoPlayer is the underlying Video class that is used for FLVPlayback. This is the underlying Video class we will use and wrap in the spark video components.
VideoElement - spark.primitives.VideoElement (or sparks.component.VideoElement) - This will be the chromeless video component in Flex. It extends GraphicElement and can be dropped in to a Group and be laid out.
Spark VideoPlayer - spark.components.VideoPlayer - This will be the skinnable video component in Flex. It extends SkinnableComponent and will provide skin parts for many common use-cases.
Embedded Video - Playing a video by that's included in the main SWF by embedding the video. The Spark video components will not support embedded video.
Progressive Video - Playing a video by downloading directly from a server, issuing a typical HTTP request.
Streaming Video - Playing a video from a special media server, like Flash Media Server, which streams the video from the server to the client through a persistent connection to the video server. If the developer specified multiple streams with different bit-rates (multi-bitrate), the server can use bandwidth detection to figure out what's the best stream to play. Through streaming, you can support live video content.
## Summary and Background
----
The Flash player ships with a Video control, but in order to use it in Flex, one has to do a lot of work. The FMS and Flash Authoring team have provided FLVPlayback, which is a video component for Flash Authoriring. However, that component cannot be directly dropped into Flex and laid out properly. In order to do that, we are going to provide wrapper classes in Flex that wrap the VideoPlayer class from the FLVPlayback component. These are the video classes that Flex developers will use.
There are two video classes we are going to ship: VideoElement and Spark VideoPlayer. VideoElement is a chromeless Video component. You can set properties, call methods directly on it, and listen for events; but there is no UI for interacting with the video itself. Spark VideoPlayer is a skinnable wrapper for VideoElement. It provides the same set of methods, properties, and events, but it has a skinnable UI associated with it.
As the Strobe team works on a new Video component, we want to be able to swap out the underlying VideoPlayer class and use the new Strobe VideoPlayer class instead. We'd like to do this all without breaking compatibility with the VideoElement and Spark VideoPlayer classes. In order to do this, we need to make sure what we're exposing from the VideoPlayer class will still be available in the Strobe video class. Also, when we switch over to the Strobe component, we can add the new features.
## Usage Scenarios
----
Jane wants to drop in a new corporate video into her Flex application. She doesn't want any UI on it but just wants to drop it in and have the video play. For this, she uses VideoElement with progressive download.
Joe wants to include a quick animation he's done in his portfolio. He uses the Spark VideoPlayer component with progressive download to show the video and then reskins the component to fit in with the overall look and feel of the website.
John is build a small website to keep an eye on his dog when he's away. He sets up a video camera and a video server. On the client side he decides to use Flex and uses the Spark VideoPlayer component, which supports live streaming.
James is creating a trailer for an Indie documentary he is filming. He encodes the video three times with three different bitRates to support multiple quality levels. He sets up Flash Media Server on the server-side, and on the client side he decides to use Flex and uses the Spark VideoPlayer component, which supports multi-bitrate video.
## Detailed Description
----
The video components in Flex will supportprogressive download, streaming, live streaming, and streaming with multi-bit rate. DVR support will be added later on. In order to support this, the `source` property on VideoElement and VideoPlayer will be typed as an Object in order to support Strings and a StreamingVideoSource object. The StreamingVideoSource object will handle all of the streaming cases (regular streaming, live streaming, and multi-bitrate streaming). This differs from FLVPlayback, which has play(source, totalTime, live) and play2(dyanmicStreamObject), but it fits in better with the MXML model of Flex.
### Example 1: Progressive Download
<s:videoplayer source="assets/phone.flv" autoplay="false">
### Example 2: Multi-bit rate streaming, chromeless
<s:videoelement>
<s:source>
<s:streamingvideosource serveruri="rtmp://localhost/myStream/">
<s:streamitems>
<s:streamitem streamname="MP4:sample1_500kbps.f4v" bitrate="500">
<s:streamitem streamname="MP4:sample1_700kbps.f4v" bitrate="700">
<s:streamitem streamname="MP4:sample1_1000kbps.f4v" bitrate="1000">
</s:streamitem></s:streamitem></s:streamitem></s:streamitems>
</s:streamingvideosource>
</s:source>
</s:videoelement>
### Example 3: Streaming Video
<s:videoelement>
<s:streamingvideosource serveruri="rtmp://localhost/myStream/">
<s:streamitem streamname="myStream">
</s:streamitem></s:streamingvideosource>
</s:videoelement>
### Example 4: Live Streaming Video
<s:videoelement>
<s:streamingvideosource serveruri="rtmp://localhost/myStream/" live="true">
<s:streamitem streamname="myStream">
</s:streamitem></s:streamingvideosource>
</s:videoelement>
The skinnable Spark VideoPlayer component will have the following skin parts defined:
* videoElement:VideoElement
* playerControls:DisplayObject (all of the video player UI controls)
* playButton:ButtonBase
* pauseButton:ButtonBase
* playPauseButton:ToggleButtonBase
* stopButton:ButtonBase
* muteButton:ToggleButtonBase
* volumeBar:VideoPlayerVolumeBar
* scrubBar:VideoPlayerScrubBar
* fullScreenButton:ButtonBase;
* totalTimeLabel:TextGraphicElement
* playheadTimeLabel:TextGraphicElement
For the playPauseButton, usually someone would either have a playButton and a pauseButton; or they will have a playPauseButton that toggles between playing and pausing. All of the parts are optional, except for videoElement.
The skin states that are supported are a subset of the "states" that the FLVPlayback VideoPlayer reports (fullScreen and normal versions of them). These skin states are:
* disconnected
* stopped
* playing
* loading
* connectionError
* disabled
* fullScreenDisconnected
* fullScreenStopped
* fullScreenPlaying
* fullScreenLoading
* fullScreenConnectionError
* fullScreenDisabled
The states reported from the underlying VideoPlayer are disconnected, stopped, playing, loading, connectionError, buffering (corresponds to skin state of "loading"), paused (maps to "stopped"), rewinding (not present), resizing (not present), seeking (not present), and exexQueuedCmd (not present).
For states, sometimes you want to know whether you are "playing and loading" versus "paused and loading." Because of this, there's an extra read-only property, `playing`, which is true if the video is currently playing or the video is trying to play but is buffering, loading, or seeking.
## API Description
----
In order to switch to Strobe later on, we are trying to keep APIs on the Spark VideoElement/VideoPlayer to a minimum. However, we do want more advanced users to be able to get at the underlying VideoPlayer object. To allow this, there's an `mx_internal` `videoPlayer` variable defined on VideoElement.
In addition to this API description for the new classes below, there's a list of API differences between the Halo VideoPlayer component, FLVPlayback, the underlying VideoPlayer, and the new Spark VideoPlayer component. These differences are enumerated in [this excel spreadsheet](%5Edifferences%20between%20video%20components.xlsx).
package spark.primitives
{
//--------------------------------------
// Events
//--------------------------------------
/**
* Dispatched when the
*
* @eventType close
*/
public static const CLOSE:String = "close";
/**
* The
*
* @eventType complete
*/
public static const COMPLETE:String = "complete";
/**
* The VideoEvent.METADATA_RECEIVED constant defines the value of the
*
*
* @eventType metadataReceived
*/
public static const METADATA_RECEIVED:String = "metadataReceived";
/**
* The
*
* @eventType playheadUpdate
*/
public static const PLAYHEAD_UPDATE:String = "playheadUpdate";
/**
* The
*
* @eventType ready
*/
public static const READY:String = "ready";
//--------------------------------------------------------------------------
//
// Constructor
//
//--------------------------------------------------------------------------
/**
* Constructor.
*
* @param type The event type; indicates the action that caused the event.
*
* @param bubbles Specifies whether the event can bubble up the display list hierarchy.
*
* @param cancelable Specifies whether the behavior associated with
* the event can be prevented.
*
* @param playeheadTime The location of the playhead when the event occurs.
*/
public function VideoEvent(type:String, bubbles:Boolean = false,
cancelable:Boolean = false,
playheadTime:Number = NaN,
metadataInfo:Object = null);
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
//----------------------------------
// metadataInfo:Object
//----------------------------------
/**
* The object with properties describing the FLV file.
*/
public var metadataInfo:Object;
//----------------------------------
// playheadTime
//----------------------------------
/**
* The location of the playhead of the VideoPlayer control
* when the event occurs.
*/
public var playheadTime:Number;
}
}
\\
\\
## B Features
----
None
## Examples and Usage
----
### Example 1: Progressive Download
<s:videoplayer source="assets/phone.flv" autoplay="false">
### Example 2: Multi-bit rate streaming, chromeless
<s:videoelement>
<s:source>
<s:streamingvideosource serveruri="rtmp://localhost/myStream/">
<s:streamitems>
<s:streamitem streamname="MP4:sample1_500kbps.f4v" bitrate="500">
<s:streamitem streamname="MP4:sample1_700kbps.f4v" bitrate="700">
<s:streamitem streamname="MP4:sample1_1000kbps.f4v" bitrate="1000">
</s:streamitem></s:streamitem></s:streamitem></s:streamitems>
</s:streamingvideosource>
</s:source>
</s:videoelement>
### Example 3: Streaming Video
<s:videoelement>
<s:streamingvideosource serveruri="rtmp://localhost/myStream/">
<s:streamitem streamname="myStream">
</s:streamitem></s:streamingvideosource>
</s:videoelement>
### Example 4: Live Streaming Video
<s:videoelement>
<s:streamingvideosource serveruri="rtmp://localhost/myStream/" live="true">
<s:streamitem streamname="myStream">
</s:streamitem></s:streamingvideosource>
</s:videoelement>
### Example 5: Sample skin for skinnable VideoPlayer:
<s:skin xmlns="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<s:states>
<s:state name="connectionError" stategroups="connectionErrorStates, normalStates">
<s:state name="disabled" stategroups="disabledStates, normalStates">
<s:state name="disconnected" stategroups="disconnectedStates, normalStates">
<s:state name="loading" stategroups="loadingStates, normalStates">
<s:state name="playing" stategroups="playingStates, normalStates">
<s:state name="stopped" stategroups="stoppedStates, normalStates">
<s:state name="fullScreenConnectionError" stategroups="connectionErrorStates, fullScreenStates">
<s:state name="fullScreenDisabled" stategroups="disabledStates, fullScreenStates">
<s:state name="fullScreenDisconnected" stategroups="disconnectedStates, fullScreenStates">
<s:state name="fullScreenLoading" stategroups="loadingStates, fullScreenStates">
<s:state name="fullScreenPlaying" stategroups="playingStates, fullScreenStates">
<s:state name="fullScreenStopped" stategroups="stoppedStates, fullScreenStates">
</s:state></s:state></s:state></s:state></s:state></s:state></s:state></s:state></s:state></s:state></s:state></s:state></s:states>
<s:layout>
<s:verticallayout horizontalalign="center">
</s:verticallayout></s:layout>
<s:videoelement id="videoElement">
<s:filters>
<shaderfilter includein="seeking, buffering" shader="@Embed(source='smudger.pbj')">
</shaderfilter></s:filters>
</s:videoelement>
<s:videoplayerscrubbar id="scrubBar">
<s:group id="playerControls">
<s:layout>
<s:horizontallayout>
</s:horizontallayout></s:layout>
<s::button id="stopButton" label="Stop">
<s:button id="playButton" label="Play">
<s:button id="pauseButton" label="Pause">
<s:togglebutton id="muteButton" skinclass="MuteButtonSkin">
<s:videoplayervolumebar id="volumeBar" height="21">
<s:button id="fullScreenButton" label="Fullscreen">
</s:button></s:videoplayervolumebar></s:togglebutton></s:button></s:button></s::button></s:group>
</s:videoplayerscrubbar></s:skin>
## Additional Implementation Details
----
The VideoElement is a GraphicElement whose displayObject is the VideoPlayer. This was a light-weight, easy implementation to get the videoPlayer into the Flex layout system. All the important video player properties/methods/events are proxied on to the video graphic element.
## Prototype Work
----
A prototype of VideoElement and VideoPlayer was created to see how viable this strategy was, especially to figure out how easy it is to create the skin.
## Compiler Work
----
No compiler work
## Web Tier Compiler Impact
----
None
## Flex Feature Dependencies
----
Dependence on the Video team and FLVPlayback + the new Strobe component.
## Backwards Compatibility
----
### Syntax changes
-
### Behavior
-
### Warnings/Deprecation
The old mx.controls.VideoPlayer component can still be used, but the new spark.controls.VideoPlayer should effectively replace it.
## Accessibility
----
No special accessibility work is being done.
## Performance
----
Wrapping VideoPlayer in a VideoElement in a VideoPlayer component could be a little expensive, especially as properties might be duplicated, method calls go through multiple levels of indirection, and event listeners are added on every object for every event. However, there shouldn't be many video elements in a given application, so we feel this shouldn't be much of an issue. Plus, we'll try to optimize the event listener issue as much as possible by not adding a listener on the sub-object unless someone adds a listener to the main object first.
## Globalization
----
None
## Localization
----
None
### Framework Features
None
## Issues and Recommendations
----
* The scrub bar is often shaded to show what's been buffered in. How can we get our Range component to support that? The current plan is to add a new class that subclasses HSlider, VideoPlayerScrubBar. The VideoPlayer scrubBar part is typed as a VideoPlayerScrubBar,.
* fullScreen support and states explosion: To support fullScreen, we had to double the number of skin states. Multi-dimensional states would be nice instead
* To support the VideoPlayerVolumeBar which is a popup with Mute button in our case, we needed to be able to push the volume down into the mute button because the mute button/volume icon looks differently depending on what the volume is. Also, the VideoPlayer needs to be able to know when the mute button inside the VideoPlayerVolumeBar is clicked. Because of this, we typed the volumeBar to VideoPlayerVolumeBar and created another new class, VideoPlayerVolumeBarMuteButton. This does limit what other skin implementors can use (it must be a VideoPlayerVolumeBar), but makes the contract really clear.
## Documentation
---- -
## QA
----
Need to make sure autoPlay, play(), and source all interact well with each other. Also, need to make sure all the properties/methods/events are proxied up correctly, especially around data-binding. For instance, checking to make sure the volume property can be bound correctly when the volume property is set through ActionScript or by a user-action with the volumeBar.
NetConnection is closed,
* whether by being timed out, by calling the close() method,
* or by loading a new video stream. This event is only dispatched
* with RTMP streams, never HTTP.
*
* @eventType spark.events.VideoEvent.CLOSE
*/
Event(name="close", type="spark.events.VideoEvent")
/**
* Dispatched when playing completes because the player reached the end of the FLV file.
* The component does not dispatch the event if you call the stop() or
* pause() methods
* or click the corresponding controls.
*
* @eventType spark.events.VideoEvent.COMPLETE
*/
Event(name="complete", type="spark.events.VideoEvent")
/**
* Dispatched the first time the FLV file's metadata is reached.
* The event object has an info property that contains the
* info object received by the NetStream.onMetaData event callback.
*
* @eventType spark.events.VideoEvent.METADATA_RECEIVED
*/
Event(name="metadataReceived", type="spark.events.VideoEvent")
/**
* Dispatched every 0.25 seconds while the
* video is playing. This event is not dispatched when it is paused
* or stopped, unless a seek occurs.
*
* @eventType spark.events.VideoEvent.PLAYHEAD_UPDATE
*/
Event(name="playheadUpdate", type="spark.events.VideoEvent")
/**
* Indicates progress made in number of bytes downloaded. Dispatched starting
* when the load begins and ending when all bytes are loaded or there is a network error.
* Dispatched every 0.25 seconds starting when load is called and ending
* when all bytes are loaded or if there is a network error. Use this event to check
* bytes loaded or number of bytes in the buffer.
*
* Dispatched only for a progressive HTTP download. Indicates progress in number of
* downloaded bytes. The event object has the bytesLoaded and bytesTotal
* properties
This event is dispatched the first time the VideoPlayer
* enters a responsive state after a new FLV is loaded
* with the play() or load() method.
* It is dispatched once for each FLV loaded.
source property is set.
* If true, the video file immediately begins to buffer and
* play.
*
* Even if autoPlay is set to false, Flex
* starts loading the video after the initialize() method is
* called.
* For Flash Media Server, this means creating the stream and loading
* the first frame to display.
* In the case of an HTTP download, Flex starts downloading the stream
* and shows the first frame.
stop() method or by
* reaching the end of the stream.
*
* This property has no effect for live streaming video.
*
* @default true
*/
public function get autoRewind():Boolean;
public function set autoRewind(value:Boolean):void;
//----------------------------------
// maintainAspectRatio
//----------------------------------
Inspectable(Category="General", defaultValue="true")
/**
* Specifies whether the control should maintain the original aspect ratio
* while resizing the video.
*
* @default true
*/
public function get maintainAspectRatio():Boolean;
public function set maintainAspectRatio(value:Boolean):void;
//----------------------------------
// muted
//----------------------------------
Inspectable(category="General", defaultValue="false")
/**
* Set to true to mute the video, false
* to unmute the video.
*/
public function get muted():Boolean;
public function get muted():Boolean;
//----------------------------------
// playheadTime
//----------------------------------
Bindable("playheadUpdate")
Inspectable(Category="General", defaultValue="0")
/**
* Playhead position, measured in seconds, since the video starting
* playing.
* The event object for many of the VideoPlay events include the playhead
* position so that you can determine the location in the video file where
* the event occurred.
*
* Setting this property to a value in seconds performs a seek * operation. * If the video is currently playing, * it continues playing from the new playhead position. * If the video is paused, it seeks to * the new playhead position and remains paused. * If the video is stopped, it seeks to * the new playhead position and enters the paused state. * Setting this property has no effect with live video streams.
* *If the new playhead position is less than 0 or NaN, * the control throws an exception. If the new playhead position * is past the end of the video, or past the amount of the video file * downloaded so far, then the control still attempts the seek.
* *For an FLV file, setting the playheadTime property seeks
* to the keyframe closest to the specified position, where
* keyframes are specified in the FLV file at the time of encoding.
* Therefore, you might not seek to the exact time if there
* is no keyframe specified at that position.
This property throws an exception if set when no stream is
* connected. Use the stateChange event and the
* connected property to determine when it is
* safe to set this property.
The video may not be currently playing, as it may be seeking * or buferring, but the video is attempting to play.
*
* @see #play()
* @see #pause()
* @see #stop()
* @see #autoPlay
*/
public function get playing():Boolean;
//----------------------------------
// source
//----------------------------------
Bindable("sourceChanged")
Inspectable(category="General", defaultValue="null")
/**
* For progressive download, the source is just a path or URL pointing
* to the video file to play. For streaming (streaming, live streaming,
* or multi-bitrate streaming), the source property is a
* StreamingVideoSource object.
*/
public function get source():Object;
public function set source(value:Object):void;
//----------------------------------
// totalTime
//----------------------------------
Bindable("complete")
Bindable("metadataReceived")
Inspectable(defaultValue="NaN")
/**
* Total time for the video feed. -1 means that property
* was not pass into play() or
* we were unable to detect the total time automatically,
* or have not yet.
*
* @return The total running time of the FLV in seconds
*/
public function get totalTime():Number;
//----------------------------------
// videoObject
//----------------------------------
/**
* The underlying flash player flash.media.Video object
*/
public function get videoObject():Video;
//----------------------------------
// volume
//----------------------------------
Bindable("volumeChanged")
Inspectable(category="General", defaultValue="0.75")
/**
* The volume level, specified as an value between 0 and 1.
*
* @default 0.75
*/
public function get volume():Number;
public function set volume(value:Number):void;
//--------------------------------------------------------------------------
//
// Methods
//
//--------------------------------------------------------------------------
/**
* Pauses playback without moving the playhead.
* If playback is already is paused or is stopped, this method has no
* effect.
*
*
To start playback again, call the play() method.
If time is less than 0 or NaN, throws exeption. If time * is past the end of the stream, or past the amount of file * downloaded so far, then will attempt seek and when fails * will recover.
* * @param time seconds */ public function seek(time:Number):void; /** * Stops video playback. IfautoRewind is set to
* true, rewinds to first frame. If video is already
* stopped, has no effect. To start playback again, call
* play().
*
* @see #autoRewind
* @see #play()
*/
public function stop():void;
}
}
\\
\\
package spark.components
{
//--------------------------------------
// Events
//--------------------------------------
/**
* Dispatched when the NetConnection is closed,
* whether by being timed out, by calling the close() method,
* or by loading a new video stream. This event is only dispatched
* with RTMP streams, never HTTP.
*
* @eventType spark.events.VideoEvent.CLOSE
*/
Event(name="close", type="spark.events.VideoEvent")
/**
* Dispatched when playing completes because the player reached the end of the FLV file.
* The component does not dispatch the event if you call the stop() or
* pause() methods
* or click the corresponding controls.
*
* @eventType spark.events.VideoEvent.COMPLETE
*/
Event(name="complete", type="spark.events.VideoEvent")
/**
* Dispatched the first time the FLV file's metadata is reached.
* The event object has an info property that contains the
* info object received by the NetStream.onMetaData event callback.
*
* @eventType spark.events.VideoEvent.METADATA_RECEIVED
*/
Event(name="metadataReceived", type="spark.events.VideoEvent")
/**
* Dispatched every 0.25 second while the
* video is playing. This event is not dispatched when it is paused
* or stopped, unless a seek occurs.
*
* @eventType spark.events.VideoEvent.PLAYHEAD_UPDATE
*/
Event(name="playheadUpdate", type="spark.events.VideoEvent")
/**
* Indicates progress made in number of bytes downloaded. Dispatched starting
* when the load begins and ending when all bytes are loaded or there is a network error.
* Dispatched every 0.25 seconds starting when load is called and ending
* when all bytes are loaded or if there is a network error. Use this event to check
* bytes loaded or number of bytes in the buffer.
*
* Dispatched only for a progressive HTTP download. Indicates progress in number of
* downloaded bytes. The event object has the bytesLoaded and bytesTotal
* properties
This event is dispatched the first time the VideoPlayer
* enters a responsive state after a new FLV is loaded
* with the play() or load() method.
* It is dispatched once for each FLV loaded.
true. When the video is paused or stopped,
* the selected property will be set tofalse.
*/
public var playPauseButton:ToggleButtonBase;
SkinPart(required="false")
/**
* An optional skin part for the scrub bar (the
* timeline).
*/
public var scrubBar:VideoPlayerScrubBar;
SkinPart(required="false")
/**
* An optional skin part for the stop button
*/
public var stopButton:ButtonBase;
SkinPart(required="false")
/**
* An optional skin part to display the totalTime.
*/
public var totalTimeLabel:TextGraphicElement;
SkinPart(required="false")
/**
* An optional skin part for the volume control.
*/
public var volumeBar:VideoPlayerVolumeBar;
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
//----------------------------------
// autoPlay
//----------------------------------
Inspectable(category="General", defaultValue="true")
/**
* @copy spark.primitives.VideoElement#autoPlay
*/
public function get autoPlay():Boolean;
public function set autoPlay(value:Boolean):void;
//----------------------------------
// autoRewind
//----------------------------------
Inspectable(category="General", defaultValue="true")
/**
* @copy spark.primitives.VideoElement#autoRewind
*/
public function get autoRewind():Boolean;
public function set autoRewind(value:Boolean):void;
//----------------------------------
// maintainAspectRatio
//----------------------------------
Inspectable(Category="General", defaultValue="true")
/**
* @copy spark.primitives.VideoElement#maintainAspectRatio
*/
public function get maintainAspectRatio():Boolean;
public function set maintainAspectRatio(value:Boolean):void;
//----------------------------------
// muted
//----------------------------------
Inspectable(category="General", defaultValue="false")
/**
* @copy spark.primitives.VideoElement#muted
*/
public function get muted():Boolean;
public function set muted(value:Boolean):void;
//----------------------------------
// playheadTime
//----------------------------------
Bindable("playheadUpdate")
Inspectable(Category="General", defaultValue="0")
/**
* @copy spark.primitives.VideoElement#playheadTime
*/
public function get playheadTime():Number;
//----------------------------------
// playing
//----------------------------------
Inspectable(category="General")
/**
* @copy spark.primitives.VideoElement#playing
*/
public function get playing():Boolean;
//----------------------------------
// source
//----------------------------------
Bindable("sourceChanged")
Inspectable(category="General", defaultValue="null")
/**
* @copy spark.primitives.VideoElement#source
*/
public function get source():Object;
public function set source(value:Object):void;
//----------------------------------
// totalTime
//----------------------------------
Bindable("complete")
Bindable("metadataReceived")
Inspectable(defaultValue="NaN")
/**
* @copy spark.primitives.VideoElement#totalTime
*/
public function get totalTime():Number;
//----------------------------------
// volume
//----------------------------------
Bindable("volumeChanged")
Inspectable(category="General", defaultValue="0.75")
/**
* @copy spark.primitives.VideoElement#volume
*/
public function get volume():Number;
public function set volume(value:Number):void;
//--------------------------------------------------------------------------
//
// Methods
//
//--------------------------------------------------------------------------
/**
* @copy spark.primitives.VideoElement#pause()
*
* @throws TypeError if the skin hasn't been loaded up yet
* and there's no videoElement
*/
public function pause():void;
/**
* @copy spark.primitives.VideoElement#play()
*
* @throws TypeError if the skin hasn't been loaded up yet
* and there's no videoElement
*/
public function play(startTime:Number=NaN, duration:Number=NaN):void;
/**
* @copy spark.primitives.VideoElement#seek()
*
* @throws TypeError if the skin hasn't been loaded up yet
* and there's no videoElement
*/
public function seek(time:Number):void;
/**
* @copy spark.primitives.VideoElement#stop()
*
* @throws TypeError if the skin hasn't been loaded up yet
* and there's no videoElement
*/
public function stop():void;
}
}
\\
\\
package spark.components.supportClasses
{
DefaultProperty("streamItems")
/**
* The StreamingVideoSource class represents a streaming video source and can be
* used for streaming pre-recorded video or live streaming video. In addition,
* it can support a single stream or multiple streams associated with different
* bitrates. The VideoPlayer and VideoElement
* classes can take a StreamingVideoSource instance as its source
* property.
*
* @see spark.controls.VideoPlayer
* @see spark.primitives.VideoElement
*/
public class StreamingVideoSource extends Object
{
//--------------------------------------------------------------------------
//
// Constructor
//
//--------------------------------------------------------------------------
public function StreamingVideoSource();
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
//----------------------------------
// live
//----------------------------------
Inspectable(category="General", defaultValue="false")
/**
* A Boolean value that is true if the video stream is live.
*
* Set the live property to false when sending
* a prerecorded video stream to the video player and to true
* when sending real-time data such as a live broadcast.
-
*
- selects an item in the dropDown *
- mouses outside outside of the dropDown *
This is how long to wait while hovered over the button before the * pop up opens.
* * @default 200 */ private static const ROLL_OVER_OPEN_DELAY:Number = 200; //-------------------------------------------------------------------------- // // Skin Parts // //-------------------------------------------------------------------------- /** * A skin part that defines the mute/unmute button. */ SkinPart(required="false") public var muteButton:VideoPlayerVolumeBarMuteButton; /** * A skin part that defines the dropDown area. When the volume slider * dropdown is open, clicking anywhere outside of the dropDown skin * part will close the video slider dropdown. */ SkinPart(required="false") public var dropDown:DisplayObject; /** * Constructor. */ public function VideoPlayerVolumeBar(); //-------------------------------------------------------------------------- // // Properties // //-------------------------------------------------------------------------- //---------------------------------- // dropDownController //---------------------------------- /** * Instance of the helper class that handles all of the mouse, keyboard * and focus user interactions. */ protected function get dropDownController():DropDownController; protected function set dropDownController(value:DropDownController):void; //-------------------------------------------------------------------------- // // Methods // //-------------------------------------------------------------------------- /** * Opens the dropDown. */ public function openDropDown():void; /** * Closes the dropDown. * * @param commit Flag indicating if the component should commit the selected * data from the dropDown. * * @langversion 3.0 * @playerversion Flash 10 * @playerversion AIR 1.5 * @productversion Flex 4 */ public function closeDropDown(commit:Boolean):void; //-------------------------------------------------------------------------- // // Event handling // //-------------------------------------------------------------------------- /** * Event handler for thedropDownController
* DropdownEvent.OPEN event. Updates the skin's state and
* ensures that the selectedItem is visible.
*/
protected function dropDownController_openHandler(event:DropdownEvent):void;
/**
* Event handler for the dropDownController
* DropdownEvent.CLOSE event. Updates the skin's state.
*/
protected function dropDownController_closeHandler(event:DropdownEvent):void;
}
}
\\
\\
package spark.components
{
/**
* The VideoPlayerVolumeBarMuteButton is a mute button
* to be used inside the VideoPlayerVolumeBar. The VideoPlayer
* hooks it up so that when the button is clicked it'll
* mute/unmute the volume. This button has a value property
* so that the visuals of the button can change based on the
* volume.
*/
public class VideoPlayerVolumeBarMuteButton extends Button
{
/**
* Constructor.
*/
public function VideoPlayerVolumeBarMuteButton()
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
// TODO: should be called volume instead of value?
//----------------------------------
// value
//----------------------------------
Bindable(event="valueCommit")
/**
* The volume of the video player.
*/
public function get value():Number;
public function set value(value:Number):void;
}
}
\\
\\
package spark.events
{
/**
* The VideoEvent class represents the event object passed to the event listener for
* events dispatched by the VideoPlayer control, and defines the values of
* the VideoPlayer.state property.
*
* @see spark.controls.VideoPlayer
*/
public class VideoEvent extends Event
{
//--------------------------------------------------------------------------
//
// Class constants
//
//--------------------------------------------------------------------------
/**
* The VideoEvent.CLOSE constant defines the value of the
* type property of the event object for a close event.
*
* The properties of the event object have the following values:
* * * * * * * * *| Property | Value |
|---|---|
bubbles | false |
cancelable | false |
currentTarget | The Object that defines the
* event listener that handles the event. For example, if you use
* myButton.addEventListener() to register an event listener,
* myButton is the value of the currentTarget. |
metadataInfo | If the event was triggerred from * new metadata, an object describing the FLV file. |
playheadTime | The location of the playhead * when the event occurs. |
target | The Object that dispatched the event;
* it is not always the Object listening for the event.
* Use the currentTarget property to always access the
* Object listening for the event. |
VideoEvent.COMPLETE constant defines the value of the
* type property of the event object for a complete event.
*
* The properties of the event object have the following values:
* * * * * * * * *| Property | Value |
|---|---|
bubbles | false |
cancelable | false |
currentTarget | The Object that defines the
* event listener that handles the event. For example, if you use
* myButton.addEventListener() to register an event listener,
* myButton is the value of the currentTarget. |
metadataInfo | If the event was triggerred from * new metadata, an object describing the FLV file. |
playheadTime | The location of the playhead * when the event occurs. |
target | The Object that dispatched the event;
* it is not always the Object listening for the event.
* Use the currentTarget property to always access the
* Object listening for the event. |
type property for a metadataReceived event.
*
* This event has the following properties:
* * * * * * * * *| Property | Value |
|---|---|
bubbles | false |
cancelable | false;
* there is no default behavior to cancel. |
currentTarget | The Object that defines the
* event listener that handles the event. For example, if you use
* myButton.addEventListener() to register an event listener,
* myButton is the value of the currentTarget. |
metadataInfo | If the event was triggerred from * new metadata, an object describing the FLV file. |
playheadTime | The location of the playhead * when the event occurs. |
target | The Object that dispatched the event;
* it is not always the Object listening for the event.
* Use the currentTarget property to always access the
* Object listening for the event. |
VideoEvent.PLAYHEAD_UPDATE constant defines the value of the
* type property of the event object for a playheadUpdate event.
*
* The properties of the event object have the following values:
* * * * * * * * *| Property | Value |
|---|---|
bubbles | false |
cancelable | false |
currentTarget | The Object that defines the
* event listener that handles the event. For example, if you use
* myButton.addEventListener() to register an event listener,
* myButton is the value of the currentTarget. |
metadataInfo | If the event was triggerred from * new metadata, an object describing the FLV file. |
playheadTime | The location of the playhead * when the event occurs. |
target | The Object that dispatched the event;
* it is not always the Object listening for the event.
* Use the currentTarget property to always access the
* Object listening for the event. |
VideoEvent.READY constant defines the value of the
* type property of the event object for a ready event.
*
* The properties of the event object have the following values:
* * * * * * * * *| Property | Value |
|---|---|
bubbles | false |
cancelable | false |
currentTarget | The Object that defines the
* event listener that handles the event. For example, if you use
* myButton.addEventListener() to register an event listener,
* myButton is the value of the currentTarget. |
metadataInfo | If the event was triggerred from * new metadata, an object describing the FLV file. |
playheadTime | The location of the playhead * when the event occurs. |
target | The Object that dispatched the event;
* it is not always the Object listening for the event.
* Use the currentTarget property to always access the
* Object listening for the event. |
[[ include ref='flexsdk_rightnav' ]]
</s:videoplayer></streamitem></streamitem></s:videoplayer>
[[ include ref='site:open_commentlogin' ]]
