<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:Style>
        @font-face {
            src:url("assets/arial.ttf");
            font-family: Arial;
        }
	
		.timeStyle {
			color: #FFFFFF;
        	font-family: Arial;
        	font-size: 12;
		}

		.playPauseStyle {
			/* play button skins */
			skin: Embed('assets/control_play.png');
			downSkin: Embed('assets/control_play_blue.png');
			
			/* pause button skins */
			selectedUpSkin: Embed('assets/control_pause.png');
			selectedOverSkin: Embed('assets/control_pause.png');
			selectedDownSkin: Embed('assets/control_pause_blue.png');
		}
		
		.stopStyle {
			skin: Embed('assets/control_stop.png');
			downSkin: Embed('assets/control_stop_blue.png');
		}
		
		.controllerStyle {
			bottom: 5;
			left: 5;
			right: 5;
			paddingBottom: 5;
			paddingLeft: 5;
			paddingRight: 5;
			paddingTop: 5;
			alpha: 0;
			background-color: #000000;
			background-alpha: 0.5;
		}
	</mx:Style>

	<mx:Script>
		<![CDATA[
			import mx.events.VideoEvent;

			private function showControls():void {
				fadeIn.play([controls]);
			}
			
			private function hideControls():void {
				fadeOut.play([controls]);
			}
			
			private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
				var pTime:Date = new Date(videoDisplay.playheadTime * 1000 || 100);
				var tTime:Date = new Date(videoDisplay.totalTime * 1000);
				time.text = dateFormatter.format(pTime) + " / " + dateFormatter.format(tTime);
			}
			
			private function playPauseButton_click(evt:MouseEvent):void {
				if (videoDisplay.playing) {
					videoDisplay.pause();
				} else {
					videoDisplay.play();
				}
			}
			
			private function stopButton_click(evt:MouseEvent):void {
				videoDisplay.stop();
			}
		]]>
	</mx:Script>
	
	<mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" />
	<mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" />
	
	<mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
	
	<mx:Label text="Mouse over the VideoDisplay control below to show control buttons." />
	<mx:Canvas rollOver="showControls()" rollOut="hideControls()">
		<mx:VideoDisplay id="videoDisplay" source="http://www.helpexamples.com/flash/video/caption_video.flv" autoPlay="false" playheadUpdate="videoDisplay_playheadUpdate(event)" />
		<mx:HBox id="controls" styleName="controllerStyle" alpha="0.0">
			<mx:Button id="playPauseButton" styleName="playPauseStyle" toggle="true" selected="{videoDisplay.playing}" click="playPauseButton_click(event)" />
			<mx:Button id="stopButton" styleName="stopStyle" click="stopButton_click(event)" />
			<mx:Spacer width="100%" />
			<mx:Label id="time" styleName="timeStyle" />
		</mx:HBox>
	</mx:Canvas>

</mx:Application>