// The following is a Flash AS3 example
// The example uses the Flash UIComponents and provides a demonstration of how
// to interact with the highest level component, MediaDisplayComponent all
// components including the MediaDisplayComponent already exist on the stage
// The example illustrates the major events that playbacks dispatch as well
// as some (not all) of the properties that they possess
package
{
// flash controls
import fl.controls.Button;
import fl.controls.CheckBox;
import fl.controls.ComboBox;
import fl.controls.NumericStepper;
import fl.controls.TextArea;
import fl.controls.TextInput;
import fl.data.DataProvider;
// player objects
import flash.display.Sprite;
import flash.events.Event;
import flash.text.TextField;
// media framework
import com.dreamsocket.events.BufferTimeEvent;
import com.dreamsocket.events.DownloadEvent;
import com.dreamsocket.events.MediaRequestEvent;
import com.dreamsocket.events.MediaExceptionEvent;
import com.dreamsocket.events.PlayEvent;
import com.dreamsocket.events.StateChangeEvent;
import com.dreamsocket.events.TimeEvent;
import com.dreamsocket.flash.components.MediaDisplayComponent;
import com.dreamsocket.layout.HorizontalAlign;
import com.dreamsocket.layout.VerticalAlign;
import com.dreamsocket.media.IMediaSource;
import com.dreamsocket.media.ScaleMode;
import com.dreamsocket.media.MediaObject;
import com.dreamsocket.media.MediaSourceSelector;
import com.dreamsocket.media.MediaSource;
import com.dreamsocket.media.ByteRangeNS;
import com.dreamsocket.media.byteRangeNSClasses.ByteRangeNSRequestBuilder;
import com.dreamsocket.media.streamingNSClasses.StreamingNSRequestBuilder;
import com.dreamsocket.media.streamingNSClasses.StreamingNSRequestFactory;
public class TestMediaDisplayComponent extends Sprite
{
// playback control
public var control:MediaDisplayComponent;
// button used for clearing traced output
public var ui_clearBtn:Button;
// buttons used for controlling playback
public var ui_playBtn:Button;
public var ui_pauseBtn:Button;
public var ui_seekBtn:Button;
public var ui_loadBtn:Button;
public var ui_stopBtn:Button;
// check boxes for setting playback properties
public var ui_autoDetectChk:CheckBox;
public var ui_autoPlayChk:CheckBox;
public var ui_rewindChk:CheckBox;
// controls for changing alignment
public var ui_hAlign:ComboBox;
public var ui_vAlign:ComboBox;
// control for changing scaleMode
public var ui_scaleMode:ComboBox;
// control for changing the playback type if you turn autoDetectPlayback off
public var ui_format:ComboBox;
// editable comboBox used for setting the url of the media to load
public var ui_mediaURLTxt:ComboBox;
// numeric steppers for changing playback dimensions
public var ui_height:NumericStepper;
public var ui_width:NumericStepper;
// numeric stepper used to seek media (typically a slider)
public var ui_position:NumericStepper;
// numeric stepper used to set volume (typically be a slider)
public var ui_volume:NumericStepper;
// textfield for setting the poster (Image slate associated with the media)
public var ui_posterURLTxt:TextInput;
// text area used for showing output
public var ui_traceTxt:TextArea;
// text fields used for showing various properties of the playback
public var ui_bufferProgressTxt:TextField;
public var ui_bufferingTxt:TextField;
public var ui_currentDownloadProgressTxt:TextField;
public var ui_downloadingTxt:TextField;
public var ui_durationTxt:TextField;
public var ui_currentTimeTxt:TextField;
public var ui_formatLabel:TextField;
public var ui_stateTxt:TextField;
public var ui_timeDownloadedTxt:TextField;
public var ui_timeSeekableTxt:TextField;
public var ui_totalDownloadProgressTxt:TextField;
// background behind the playback
public var ui_bounds:Sprite;
public function TestMediaDisplayComponent()
{
// in our example we don't need to setup a stream builders because the defaults will create the stream request properly
// we provide the example to show you how you would do it
// stream builders are important in case you need to setup streams across CDNs that have odd app paths, security tokens, non reusable connections, etc
// by doing this you can just pass full URLs to the player and it can configure the requests
// it is also important to note that at lower levels like StreamingNS
// stream builders aren't imported so you have the option of creating connections and request differently
var streamFactory:StreamingNSRequestFactory = StreamingNSRequestFactory.getInstance();
// In this example..
// Create a builder that matches any server, an application that is called pmsales/integration, and any file type
// The builder will:
// reuse the netconnection
// not add the stream extension (ex: foo.flv becomes foo)
// not add the stream type (ex if it were true: foo.flv would become flv:foo)
// and define the application as pmsales/integration
streamFactory.addBuilder("*", "pmsales/integration", "*", new StreamingNSRequestBuilder({allowNCReuse:true,useStreamExtension:false, useStreamType:false, app:"pmsales/integration"}));
// for all byte range request set the default request builder (NOTE: you can create your own with IByteRangeNSRequestBuilder)
// the first parameter gives a string in the URL to match
// the second parameter gives a template to associate with that match
// the template is used to create the byte range requests
// in this case urls will be built like http://clients.dreamsocket.com/test/stream.php?file=test.flv&start=20
ByteRangeNS.defaultRequestBuilder = new ByteRangeNSRequestBuilder("http://examples.dreamsocket.com/asmediaframework/byterangens/?file=", "http://examples.dreamsocket.com/asmediaframework/byterangens/?file=${FILE_URL}&start=${FILE_POS}");
// default the media poster to the sample jpg
ui_posterURLTxt.text = "test.jpg";
// test urls
// when set the playback will immediately switch formats if needed and play the file
var testURLs:Array = [
"test.flv",
"test.jpg",
"test.mp3",
"SWFMediaAsset.swf",
"http://examples.dreamsocket.com/asmediaframework/byterangens/?file=test.flv",
"rtmp://pmsalesfs.fplive.net/pmsales/integration/AnalystOpener500.flv"
];
// playback types to use if autoDetectPlayback is false
var formats:Array = [
"progressiveNS",
"byteRangeNS",
"streamingNS",
"timedImage",
"sound",
"soundWithImage",
"timelineSWF"
];
// possible vertical alignments of the playback
var vAlign:Array = [
VerticalAlign.MIDDLE,
VerticalAlign.TOP,
VerticalAlign.BOTTOM
];
// possible horizontal alignments of the playback
var hAlign:Array = [
HorizontalAlign.CENTER,
HorizontalAlign.LEFT,
HorizontalAlign.RIGHT
];
// possible scaleModes for the playback
var scaleModes:Array = [
ScaleMode.UNIFORM,
ScaleMode.FILL,
ScaleMode.NONE
];
// set up the alignment controls with their values
this.ui_hAlign.dataProvider = new DataProvider(hAlign);
this.ui_vAlign.dataProvider = new DataProvider(vAlign);
// set up the playbackType selector which is used when autoDetectPlayback is false
this.ui_format.dataProvider = new DataProvider(formats);
this.ui_format.selectedIndex = 0;
this.ui_format.enabled = false;
// set up the scaleMode selector
this.ui_scaleMode.dataProvider = new DataProvider(scaleModes);
// setup the media url selector
this.ui_mediaURLTxt.editable = true;
this.ui_mediaURLTxt.dataProvider = new DataProvider(testURLs);
this.ui_mediaURLTxt.selectedIndex = 0;
// setup the controls that change the playback's size
this.ui_width.minimum = 1;
this.ui_width.maximum = 465;
this.ui_width.value = 320;
this.ui_height.minimum = 1;
this.ui_height.maximum = 320;
this.ui_height.value = 240;
// default autoPlay control to true
this.ui_autoPlayChk.selected = true;
// default autoDetectPlayback control to true
this.ui_autoDetectChk.selected = true;
// set the playback seek control to nonseekable defaults
this.ui_position.value = 0;
this.ui_position.minimum = 0;
this.ui_position.maximum = 0;
// the following is an example of setting the source selector to a custom media selector and playback resolver
// there is a default resolver, but this illustrates how to do a custom one
control.sourceSelector = new MediaSourceSelector(new CustomPlaybackResolver());
// listen for all media events generated by the playback
control.addEventListener(BufferTimeEvent.BUFFER_TIME_STARTED, this.onBufferState);
control.addEventListener(BufferTimeEvent.BUFFER_TIME_PROGRESS, this.onBufferProgress);
control.addEventListener(BufferTimeEvent.BUFFER_TIME_STOPPED, this.onBufferState);
control.addEventListener(MediaRequestEvent.MEDIA_REQUEST_CLOSED, this.onEvent);
control.addEventListener(MediaRequestEvent.MEDIA_REQUEST_LOADING, this.onEvent);
control.addEventListener(MediaRequestEvent.MEDIA_REQUEST_OPENING, this.onEvent);
control.addEventListener(MediaRequestEvent.MEDIA_REQUEST_READY, this.onMediaReady);
control.addEventListener(PlayEvent.PLAY_STARTED, this.onEvent);
control.addEventListener(PlayEvent.PLAY_RESUMED, this.onEvent);
control.addEventListener(PlayEvent.PLAY_PAUSED, this.onEvent);
control.addEventListener(PlayEvent.PLAY_ENDED, this.onEvent);
control.addEventListener(PlayEvent.PLAY_STOPPED, this.onEvent);
control.addEventListener(StateChangeEvent.STATE_CHANGED, this.onStateChanged);
control.addEventListener(TimeEvent.TIME_DURATION_CHANGED, this.onDurationChanged);
control.addEventListener(TimeEvent.TIME_SEEKABLE_CHANGED, this.onSeekableChanged);
control.addEventListener(TimeEvent.TIME_POSITION_CHANGED, this.onTimePositionChanged);
control.addEventListener(DownloadEvent.DOWNLOAD_STARTED, this.onDownloadState);
control.addEventListener(DownloadEvent.DOWNLOAD_PROGRESS, this.onDownloadProgress);
control.addEventListener(DownloadEvent.DOWNLOAD_STOPPED, this.onDownloadState);
control.addEventListener(MediaExceptionEvent.MEDIA_ASYNC_EXCEPTION, this.onEvent);
control.addEventListener(MediaExceptionEvent.MEDIA_IO_EXCEPTION, this.onEvent);
control.addEventListener(MediaExceptionEvent.MEDIA_SECURITY_EXCEPTION, this.onEvent);
// assign handlers that respond to ui control events
ui_autoDetectChk.addEventListener("click", this.onSetAutoDetect);
ui_clearBtn.addEventListener("click", this.onClearTrace);
ui_autoPlayChk.addEventListener("click", this.onSetAutoPlay);
ui_playBtn.addEventListener("click", this.onPlayPress);
ui_pauseBtn.addEventListener("click", this.onPausePress);
ui_seekBtn.addEventListener("click", this.onSeekPress);
ui_loadBtn.addEventListener("click", this.onRequestAsset);
ui_rewindChk.addEventListener("click", this.onSetAutoRewind);
ui_volume.addEventListener("change", this.onSetVolume);
ui_stopBtn.addEventListener("click", this.onStop);
ui_format.addEventListener("change", this.onSetFormat);
ui_width.addEventListener("change", this.onSetSize);
ui_height.addEventListener("change", this.onSetSize);
ui_scaleMode.addEventListener("change", this.onSetScaleMode);
ui_vAlign.addEventListener("change", this.onSetAlignment);
ui_hAlign.addEventListener("change", this.onSetAlignment);
}
function onBufferProgress(p_evt:BufferTimeEvent):void
{
// media bufferProgress has changed, show percent
// NOTE: buffer progress can occur when paused
// if creating a slideshow, you can use this at the beginning when state is LOADING
// if you only want to show buffering while playing (like typical video players) only show progress when the playback's state is BUFFERING
// you can get state changes from the StateChangeEvent
ui_bufferProgressTxt.text = String(p_evt.progress.toFixed(2));
}
function onBufferState(p_evt:BufferTimeEvent):void
{
// an item has stopped or started buffering
// NOTE: this state change is independent of pause, which allows for showing loading between elements of a slideshow
// if you only want to show buffering while playing (like typical video players) only show progress when the playback's state is BUFFERING
// you can get state changes from the StateChangeEvent
ui_bufferingTxt.text = (p_evt.type == BufferTimeEvent.BUFFER_TIME_STARTED) ? "TRUE" : "FALSE";
}
function onClearTrace(p_evt:Object):void
{
// wipe the text output clean
ui_traceTxt.text = "";
}
function onDurationChanged(p_evt:Object):void
{
// show the duration changed
// this occurs when media switches or when it becomes "ready"
// with DVR as media progresses, this could change as well
ui_durationTxt.text = String(control.duration);
}
function onDownloadProgress(p_evt:DownloadEvent):void
{
// percent of current download progress
// this is always in the range of 0 - 1 (streaming is 0)
// ByteRange request this value represents the % of the current range requested, when ended would be 1
ui_currentDownloadProgressTxt.text = String(p_evt.currentProgress.toFixed(2));
// percent of total download progress
// this is always in the range of 0 - 1 (streaming is 0)
// ByteRange requests this value represent the % of the total file byte range,
// therefore if the the requested range was 50% into the video, when the range completed total downloaded would be .5
// this allows you to create load bars like YouTube's (they use byte range requests)
// These loaders start at the point of seek in the scrubber and move forwared from there
ui_timeDownloadedTxt.text = String(control.timeDownloaded.start + " : " + control.timeDownloaded.end.toFixed(2));
// here you could also use bytesDownloaded to show a bytes based number
// control.bytesDownloaded.start, control.bytesDownloaded.start
}
function onDownloadState(p_evt:DownloadEvent):void
{
// both DOWNLOAD_STARTED & DOWNLOAD_STOPPED events are being routed here
// check which event occured to show when media has started or stopped downloading
// media stops downloading when it has completely finished or when it has been cancelled
ui_downloadingTxt.text = (p_evt.type == DownloadEvent.DOWNLOAD_STARTED) ? "TRUE" : "FALSE";
}
function onEvent(p_evt:Object):void
{
// record some of the events here
ui_traceTxt.text += p_evt + "\n\n";
}
function onMediaReady(p_evt:Object):void
{
// the media has whatever intrinsic metadata it needs and is ready to play
onSetSize(p_evt);
}
function onPausePress(p_evt:Object):void
{
// pause button pressed, pause the media
// if pressed during a load and prior to play when autoPlay is true, it flags the media to pause when ready
control.pause();
}
function onPlayPress(p_evt:Object):void
{
// play button, pressed play the media
// if pressed during a load and prior to play when autoPlay is false, it flags the media to play when ready
control.play();
}
function onRequestAsset(p_evt:Object):void
{
// clear out any events we recorded to output
ui_traceTxt.text = "";
// set the seek controls limit to 0
ui_position.maximum = 0;
// set the media for the playback
// NOTE: poster is an associated image
control.media = new MediaObject(new MediaSource(ui_mediaURLTxt.text), ui_posterURLTxt.text);
}
function onSeekableChanged(p_evt:TimeEvent):void
{
// the amount a media can be seeked has changed
// use the timeSeekable property to determine the range at which you can seek
// streaming and byte range media this is the duration once the media is ready
// live this is 0
// progressive is the timed downloaded
// dvr could be a floating range
// limit the control so that it doesn't allow the user to seek ahead
ui_position.maximum = control.timeSeekable.end;
// show the seekable time
// NOTE: DVR could also use control.timeSeekable.start
ui_timeSeekableTxt.text = String(control.timeSeekable.end.toFixed(2));
}
function onSeekPress(p_evt:Object):void
{
// seek to a time in the media
// a TimeEvent.TIME_POSITION_CHANGED will fire immediately if the seek is in a valid range
// and the currentTime property will also be reflected immediately
control.currentTime = (ui_position.value);
}
function onSetAutoDetect(p_evt:Object):void
{
// if turning on autodetect, dont allow users to select format and provide UI feedback
this.ui_format.enabled = !this.ui_autoDetectChk.selected;
this.ui_formatLabel.textColor = this.ui_autoDetectChk.selected ? 0xCCCCCC : 0x000000;
// toggle autoDetectPlayback
// if selected it attempts to auto choose your media format
// you can can create your own IPlaybackResolver which takes a URL and returns a playback based on what you decide that URL is
// there is a default PlaybackResolver being used
this.control.autoDetectPlayback = this.ui_autoDetectChk.selected;
// if turning off autodetect let's set the playback type to what is defined in the playback selector control
if(!this.ui_autoDetectChk.selected)
this.control.playbackType = String(this.ui_format.value);
}
function onSetAutoPlay(p_evt:Object):void
{
// determine whether media will automatically start playing when it is loaded
control.autoPlay = ui_autoPlayChk.selected;
}
function onSetAutoRewind(p_evt:Object):void
{
// set whether the media will automatically rewind and pause when it ends
// or whether it will stop at the end when it completes
// if autoRewind is set to true, the state will be set to STOPPED at completion, otherwise it is set to ENDED
// this allows you to have different view states depending on your state
// in both cases the PlayEvent.PLAY_ENDED will fire
// if auto rewound, TimeEvent.TIME_POSITION_CHANGED will also fire
control.autoRewind = ui_rewindChk.selected;
}
function onSetAlignment(p_evt:Object):void
{
// vertically align the media within its bounds (top, middle, bottom)
control.verticalAlign = String(ui_vAlign.value);
// horizontally align the media within its bounds (left, center, right)
control.horizontalAlign = String(ui_hAlign.value);
}
function onSetFormat(p_evt:Object):void
{
// since we are changing formats, for the example lets close the existing media
// This ensures you aren't switching to an incompatible type
control.close();
// instead of letting autoDetectPlayback choose what the format is, set it explicitly
// playback types are the exact names that they were registered when the playback was added to the factory
// or they are the aliases registered with the exact name
// in the component all playbacks are preregistered and aliases added
this.control.playbackType = String(this.ui_format.value);
}
function onSetScaleMode(p_evt:Object):void
{
// change the scale mode of the playback
// this can be uniform, fill, none (constants are found in com.dreamsocket.media.ScaleMode)
// uniform maintains aspect ratio
// fill fits the media to the exact size of its bounds
// none causes the media not to scale
// if set to none this will also crop the image based on its alignment
control.scaleMode = ui_scaleMode.value;
}
function onSetSize(p_evt:Object):void
{
// set the size of the background element in the example
ui_bounds.width = ui_width.value;
ui_bounds.height = ui_height.value;
// set the size of the actual playback control
control.setActualSize(ui_width.value, ui_height.value);
}
function onSetVolume(p_evt:Object):void
{
// set the volume of the playback using a 0-1 range
control.volume = ui_volume.value;
}
function onStateChanged(p_evt:StateChangeEvent):void
{
// the media has changed state, the states are found in com.dreamsocket.media.MediaState
// BUFFERING, CLOSED, ENDED, ERROR, LOADING, PAUSED, PLAYING, STOPPED
// these are definitive states which you can use to determine what you want to show at any given time
// Take note that the Flex GUMBO components are based on states, so the components are preprepped for their arrival
ui_stateTxt.text = p_evt.newState.toUpperCase();
}
function onStop(p_evt:Object):void
{
// stop button pressed, this resets media to the beginning, stops it playing, and sets the state to STOPPED
// it does not stop it loading, the close method cancels media loads
control.stop();
}
function onTimePositionChanged(p_evt:TimeEvent):void
{
// current time changed so show it
// additionally we could use com.dreamsocket.media.TimeFormatter here
// ex: if we wanted to show hours : minutes : seconds (01:20:30)
// create a formatter using a string that has the hours, minutes, and seconds tokens to replace
// var fmtr:TimeFormatter = new TimeFormatter("${H}:${M}:${S}");
// ui_currentTimeTxt.text = fmtr.format(control.currentTime);
ui_currentTimeTxt.text = String(control.currentTime.toFixed(2));
}
}
}
import com.dreamsocket.media.IMediaSource
import com.dreamsocket.media.IPlaybackResolver;
import com.dreamsocket.media.PlaybackResolver;
// The following is a custom playback resolver that analyzes the media object and determines
// what type of playback. The MediaDisplayComponent has a default resolver which handles almost all
// resolves except byte range netstreams. This is an example of how you might want to implement a resolver
internal class CustomPlaybackResolver implements IPlaybackResolver
{
protected var m_defaultResolver:PlaybackResolver;
public function CustomPlaybackResolver()
{
super();
this.m_defaultResolver = new PlaybackResolver();
}
public function resolvePlayback(p_source:IMediaSource):void
{
if(p_source == null || p_source.url == null || p_source.playback != null) return;
var URL:String = p_source.url;
// the URL is a path the a byte range stream, set the playback to byterangens
if(URL.indexOf("examples.dreamsocket.com/asmediaframework/byterangens") != -1)
{
p_source.playback = "byterangens";
}
else
{
this.m_defaultResolver.resolvePlayback(p_source);
}
}
}
