Example A

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
verticalAlign="middle" backgroundColor="black" creationComplete="showControls();">
<mx:Style>
  @font-face {
    src:url("assets/arial.ttf");
    font-family: Arial;
  }
  .timeStyle {
    color: #FFFFFF;
    font-family: Arial;
    font-size: 11;
  }
  .playPauseStyle {
    skin: Embed('assets/control_play.png');
    downSkin: Embed('assets/control_play_blue.png');
    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');
  }
  ToolTip {
    backgroundAlpha: 1.0;
    backgroundColor: haloBlue;
    fontWeight: bold;
    color: white;
  }
  HSlider {
    thumbSkin: Embed(source="assets/volume.png");
    dataTipPlacement: right;
    dataTipOffset: 0;
  }
  .controllerStyle {
    bottom: 5;
    left: 5;
    right: 5;
    paddingBottom: 2;
    paddingLeft: 8;
    paddingRight: 8;
    paddingTop: 5;
    alpha: 0;
    background-color: #000000;
    background-alpha: 0.5;
  }
</mx:Style>
<mx:Script>
<![CDATA[
  import mx.events.VideoEvent;
  import mx.controls.Alert;
  private function domainCheck():Boolean{
    var check:Boolean = true
    var str:String = url
    var pattern:RegExp = /^http\:\/\/hoge.com/;
    var result:Object = pattern.exec(str);
    if(result == null) {
      Alert.show("use hoge.com only")
      return check = false
    }
    return check
  }
  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:Canvas rollOver="showControls()" rollOut="hideControls()">
    <mx:VideoDisplay id="videoDisplay" source="http://hoge.com/hage/example.flv"
     autoPlay="false" playheadUpdate="videoDisplay_playheadUpdate(event)"
     volume="{slider.value}" />
    <mx:HBox id="controls" styleName="controllerStyle" alpha="0.0">
      <mx:Button id="playPauseButton" styleName="playPauseStyle" toggle="true"
       selected="{videoDisplay.playing}" click="{if(domainCheck()) playPauseButton_click(event);}" />
      <mx:Button id="stopButton" styleName="stopStyle" click="stopButton_click(event)" />
      <mx:Spacer width="100%" />
      <mx:HSlider id="slider" width="80" minimum="0.0" maximum="1.0" value="0.2"
       snapInterval="0.01" tickInterval="0.1" liveDragging="true" showTrackHighlight="true"
       borderColor="#ffffff" />
      <mx:Label id="time" styleName="timeStyle" />
    </mx:HBox>
  </mx:Canvas>
</mx:Application>