rendered paste body<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" backgroundGradientColors="[#8a8a8a, #ffffff]"
creationComplete="init()"
paddingLeft="0"
paddingTop="0"
paddingBottom="0"
paddingRight="0"
>
<!--
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
FlexVideoPlayer 0.2b
Florian Plag
www.video-flash.de
2007
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-->
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.VideoEvent;
[Bindable]
private var myVideos:XML;
// ::::::::::::::: Initiere Anwendung :::::::::::::::::::::
public function init():void {
myDataGrid.selectedIndex=0;
// XML-Datei laden
var myLoader:URLLoader = new URLLoader();
var myURL:URLRequest = new URLRequest("playlist.xml")
myLoader.load(myURL);
myLoader.addEventListener (Event.COMPLETE, onXMLLoaded);
myLoader.addEventListener (IOErrorEvent.IO_ERROR, onFileFailed);
// StateHandler für Video
myVid.addEventListener (VideoEvent.STATE_CHANGE, stateHandler);
}
// :::::::::::::::: XML Funktionen :::::::::::::::::::::::
private function onXMLLoaded(evt:Event):void {
// XML-Objekt erstellen
try {
myVideos = new XML(evt.target.data);
}
catch (e:TypeError) {
Alert.show("Fehler: Ungültige XML-Datei");
}
// Bild vom ersten Listeneintrag als Default laden
previewPicture.source=myVideos.video[0].preview;
}
private function onFileFailed(evt:IOErrorEvent):void {
// wenn XML-Datei nicht vorhanden
Alert.show("Fehler: Leider konnte die benötigte XML-Datei nicht geladen werden!");
}
// :::::::::::::::: Video laden :::::::::::::::::::::::
public function loadVideo(vidURL:String):void {
// Video laden, wenn Playbutton im Datagrid gedrückt wird
myVid.source = vidURL;
// Überschrift des aktuellen Films oberhalb des Videos
headlineText.text = " " + myVideos.video[selectedVideoIndex].title;
// Bedienelemente aktivieren
enableControlers(true, true, true, true, true);
}
// :::::::::::::::: Statusmeldungen des Videos :::::::::::::::::::::::
private function stateHandler (evt:VideoEvent):void {
// Hilfe: enableControlers(rewindB:Boolean, pauseB:Boolean, playB:Boolean, stopB:Boolean, seekB:Boolean)
// Für jeden Videostatus das OnScreenDisplay und die Steuerelemente anpassen
switch (evt.state) {
case "connectionError" :
Alert.show("\nLeider wurde diese Videodatei gefunden!");
myVid.close();
enableControlers(false, false, false, false, false);
onScreenText.htmlText = "";
onScreenText.visible = true;
break;
case "buffering":
onScreenText.htmlText ="Buffering ..";
onScreenText.visible = true;
enableControlers(true, true, true, true, true);
break;
case "loading":
onScreenText.htmlText ="Loading";
enableControlers(true, true, true, true, true);
break;
case "seeking":
onScreenText.htmlText = "Seeking"
onScreenText.visible = true;
enableControlers(true, true, true, true, true);
break;
case "playing":
onScreenText.htmlText = "Playing"
onScreenText.visible = false;
enableControlers(true, true, false, true, true);
break;
case "paused":
onScreenText.htmlText = "Paused"
onScreenText.visible = true;
enableControlers(true, false, true, true, true);
break;
case "stopped":
onScreenText.htmlText = "Stopped";
onScreenText.visible = true;
enableControlers(false, false, true, false, true);
break;
}
}
// :::::::::::::::: Zeit im Minuten/Sekunden umrechnen :::::::::::::::::::::::
private function generateTimecode(value:int):String{
var vidTime:Date = new Date(2007, 0, 1 , 0, 0, value);
var result:String;
if (vidTime.getSeconds() <10) {
result = vidTime.getMinutes() + ":0" + vidTime.getSeconds();
}
else {
result = vidTime.getMinutes() + ":" + vidTime.getSeconds();
};
return result;
}
// :::::::::::::::: Steuerungselemente aktivieren/deaktivieren :::::::::::::::::::::::
private function enableControlers(rewindB:Boolean, pauseB:Boolean, playB:Boolean, stopB:Boolean, seekB:Boolean):void {
rewindButton.enabled = rewindB;
pauseButton.enabled = pauseB;
playButton.enabled = playB;
stopButton.enabled = stopB;
seekBar.enabled = seekB;
}
// :::::::::::::::: Steuerungselemente aktivieren/deaktivieren :::::::::::::::::::::::
private function changeView():void {
if (currentState == 'smallLeftPanel' ) {
currentState = '';
}
else {
currentState = 'smallLeftPanel';
}
titleColumn.width = 200; // hack: damit die Playbuttons in der Liste nicht größer werden
}
]]>
</mx:Script>
<!-- ::::::::::::::::::::::::: Styles ::::::::::::::::::::::::: -->
<mx:Style>
.MyIconsStyle
{
font-family: Arial;
font-size: 10pt;
}
.MySmallIconsStyle
{
font-family: Arial;
font-size: 14pt;
}
.MyCreditsStyle
{
font-size: 9pt;
}
.MyHeadlineStyle
{
font-size: 16pt;
fontWeight: bold;
}
.MySmallHeadlineStyle
{
font-size: 10pt;
fontWeight: bold;
}
.MyOnScreenStyle
{
font-family: Arial;
font-size: 14pt;
color: #FFFFFF;
fontWeight: bold;
}
</mx:Style>
<!-- ::::::::::::::: Ansicht mit eingeklapptem linkem Panel (Playlist) ::::::::::::::::::::::::::::-->
<mx:states>
<mx:State name="smallLeftPanel">
<mx:SetProperty target="{leftPanel}" name="width" value="0"/>
<mx:RemoveChild target="{creditsFlexVideoPlayer}" />
</mx:State>
</mx:states>
<!-- ::::::::::::::: Übergangseffekt für Ansichtswechsel ::::::::::::::::::::::::::::-->
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Resize target="{leftPanel}" duration="500"/>
</mx:Transition>
</mx:transitions>
<!-- ::::::::::::: Stuff ::::::::::::::::: -->
<mx:Number id="selectedVideoIndex">{myDataGrid.selectedIndex}</mx:Number>
<mx:Fade id="fadeOut" duration="2000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="2000" alphaFrom="0.0" alphaTo="1.0"/>
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxx Layout xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<!-- ::::::::::::::::::::::::: Main Panel ::::::::::::::::::::::::: -->
<mx:Panel id="main" layout="horizontal" width="100%" height="100%"
headerHeight="0" cornerRadius="2" borderStyle="solid" borderThickness="0"
borderThicknessBottom="0" borderThicknessLeft="0" borderThicknessRight="0"
borderThicknessTop="0"
>
<!-- ::::::::::::::::::::::::: Linkes Panel ::::::::::::::::::::::::: -->
<mx:Panel id="leftPanel" title="" paddingBottom="0"
paddingTop="0" width="270" height="100%"
>
<!-- ::::::::::::::::::::::::: Datagrid ::::::::::::::::::::::::: -->
<mx:DataGrid id="myDataGrid" dataProvider="{myVideos.video}" width="100%" height="200"
change="previewPicture.source=myVideos.video[selectedVideoIndex].preview"
>
<mx:columns>
<mx:DataGridColumn id="titleColumn" dataField="title" headerText="Videos" width="200"/>
<mx:DataGridColumn dataField="playSymbolColumn" headerText="">
<mx:itemRenderer>
<mx:Component>
<mx:Button
click="outerDocument.loadVideo(data.@FLV);"
height="13"
icon="@Embed('play.png')"
toolTip="Video laden und abspielen"
/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<!-- ::::::::::::::::::::::::: Detailansicht des ausgeaehlten Videos ::::::::::::::::::::::::: -->
<mx:Form width="100%" >
<mx:FormHeading label="Filminformationen"/>
<mx:FormItem label="Titel:" width="100%">
<mx:Text
id="titleText"
width="100%"
text="{myVideos.video[selectedVideoIndex].title}"
/>
</mx:FormItem>
<mx:FormItem label="Autor:" width="100%">
<mx:Text
id="authorText"
width="100%"
text="{myVideos.video[selectedVideoIndex].author}"
/>
</mx:FormItem>
<mx:FormItem label="Infos:" width="100%">
<mx:Text
id="descriptionText"
width="100%" height="75"
text="{myVideos.video[selectedVideoIndex].description}"
/>
</mx:FormItem>
<mx:Image id="previewPicture" width="200" height="150"/>
</mx:Form>
</mx:Panel>
<!-- ::::::::::::::::::::::::: Rechtes Panel ::::::::::::::::::::::::: -->
<mx:Panel id="vidPanel" title="" width="100%" height="100%"
horizontalAlign="center" verticalAlign="middle"
paddingTop="0" paddingBottom="0" verticalGap="0"
>
<mx:HBox id="headerCanvas" width="100%" height="25" horizontalAlign="right" verticalAlign="middle" backgroundColor="#CCCCCC">
<!-- Headline -->
<mx:Text
id="headlineText" styleName="MySmallHeadlineStyle" textAlign="left" width="100%"
/>
<!-- ViewButtons -->
<mx:LinkButton id="changeViewButton" styleName="MySmallIconsStyle" width="25"
click="changeView()" toolTip="Ansicht wechseln (Vollbild / Listenansicht)"
icon="@Embed('ansicht.png')"/>
</mx:HBox>
<!-- Video-Canvas -->
<mx:Canvas id="myVidCanvas" width="100%" height="100%">
<!-- Videodisplay -->
<mx:VideoDisplay id="myVid" width="100%" height="100%" autoPlay="true"/>
<!-- OnScreenDisplay -->
<mx:Text
id="onScreenText" styleName="MyOnScreenStyle" textAlign="right" right="30" y="30"
visible ="false" selectable="false"
hideEffect="{fadeOut}" showEffect="{fadeIn}"
width="100%" height="50"
/>
</mx:Canvas>
<!-- Panel mit Steuerelemente -->
<mx:Panel id="controlPanel" layout="absolute" width="100%" height="65" horizontalAlign="center"
headerHeight="0" cornerRadius="2" borderStyle="solid" borderThickness="0"
>
<!-- ProgressBar -->
<mx:ProgressBar width="100%" id="progressBar" y="10" label="" mode="event"
minimum="0" maximum="100" height="20" left="7" right="5"
source="{myVid}" trackHeight="10" trackColors="[#AAAAAA, #DDDDDD]"
/>
<!-- seekBar -->
<mx:HSlider id="seekBar" y="19" width="100%" height="0" thumbPress="myVid.pause()"
thumbRelease="myVid.play()" change="myVid.playheadTime = seekBar.value"
value="{myVid.playheadTime}" minimum="0" maximum="{myVid.totalTime}"
dataTipFormatFunction="generateTimecode"
useHandCursor = "true" buttonMode = "true"
/>
<!-- Steuerung -->
<mx:HBox y="30" horizontalAlign="center" width="100%">
<mx:Button id="rewindButton" height="20" styleName="MyIconsStyle" click="myVid.playheadTime=0;" enabled="false" label="Rewind" toolTip="Video zum Anfang zurückspulen"/>
<mx:Button id="playButton" height="20" styleName="MyIconsStyle" click="myVid.play();" enabled="false" label="Play" toolTip="Video abspielen"/>
<mx:Button id="pauseButton" height="20" styleName="MyIconsStyle" label="Pause" click="myVid.pause();" enabled="false" toolTip="Video pausieren"/>
<mx:Button id="stopButton" height="20" styleName="MyIconsStyle" label="Stop" click="myVid.stop();" enabled="false" toolTip="Video abbrechen"/>
</mx:HBox>
</mx:Panel>
<!-- Credits -->
<mx:Box >
<mx:LinkButton id="creditsFlexVideoPlayer" height="30" label="FlexVideoPlayer" styleName="MyCreditsStyle"
click="navigateToURL(new URLRequest('http://www.video-flash.de/index.php/flexvideoplayer/'), '_blank')"
/>
</mx:Box>
</mx:Panel>
</mx:Panel>
</mx:Application>