StageVideo usage from Flex Application?

Question

Hello everyone!
I'm trying out new StageVideo class and if I add it pure AS3 project everything works perfect.
But if I try to use the same code in Flex project I get no video output, but looks like the video itself is playing ('cos I can hear the sound track).
I've tried to remove everything from mxml file to make sure nothing covers video, tried to remove all background changes and etc. (put here any other stuff that might overlay stage), but nothing helped.
Is it possible to use StageVideo from Flex app at all? May be there's some trick to it?
Can someone help? Thanks in advance!

Answer 1

Hello,
I guess there is no way to attach files to this post. I made the main app an Application instead of a ViewNavigatorApplication for simplicity sake. It's a basic mobile application project for an ipad, so in Flash Builder just create a basic project using that profile and drop these in. I appreciate you taking a look at it.
thx
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                                                      xmlns:s="library://ns.adobe.com/flex/spark"
                                                                      creationComplete="init()">
<fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
                    <![CDATA[
                              private var mediaPlayer:CatVideoPlayer;
                              private function init():void
                                        var videoFile:File = File.applicationDirectory.resolvePath("preview.mp4");
                                        var videoPath:String = new File(new File(videoFile.url).nativePath).url;
                                        mediaPlayer = new CatVideoPlayer();
                                        mediaPlayer.width = 640;
                                        mediaPlayer.height = 360;
                                        addElement(mediaPlayer);
                                        mediaPlayer.source = videoPath;
                    ]]>
</fx:Script>
</s:Application>
Custom UI Component:
package
          import flash.display.Bitmap;
          import flash.display.BitmapData;
          import flash.display.Sprite;
          import flash.display.StageAlign;
          import flash.display.StageScaleMode;
          import flash.events.Event;
          import flash.events.StageVideoAvailabilityEvent;
          import flash.events.StageVideoEvent;
          import flash.geom.Rectangle;
          import flash.media.StageVideo;
          import flash.media.StageVideoAvailability;
          import flash.media.Video;
          import flash.net.NetConnection;
          import flash.net.NetStream;
          import mx.core.FlexGlobals;
          import mx.core.UIComponent;
          public class CatVideoPlayer extends UIComponent
                    private var _defaultHeight:Number = 360;
                    private var _defaultWidth:Number = 640;
                    private var _ns:NetStream;
                    private var _obj:Object;
                    private var _source:String;
                    private var _sourceChanged:Boolean;
                    private var _stageBitmap:Bitmap;
                    private var _stageVideoAv:Boolean = false;
                    private var _sv:StageVideo;
                    private var _vd:Video;
                    private var _vidMask:Sprite;
  //private var _videoStage:Sprite;
                    public function CatVideoPlayer()
                              super();
                              mouseEnabled = false;
                              addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
                    public function onCuePoint(info:Object):void
  trace("CatVideoPlayer.onCuePoint: time=" + info.time + " name=" + info.name + " type=" + info.type);
                    public function onMetaData(info:Object):void
  //trace("metadata: duration=" + info.duration + " width=" + info.width + " height=" + info.height + " framerate=" + info.framerate);
  //this.width = info.width;
  //this.height = info.height;
                    public function onPlayStatus(info:Object):void
  trace("CatVideoPlayer.onPlayStatus: " + info.data);
                    public function onXMPData(info:Object):void
  trace("CatVideoPlayer.onXMPData: " + info.data);
                    public function set source(value:String):void
                              _source = value;
                              _sourceChanged = true;
                              invalidateProperties();
                    override protected function commitProperties():void
                              super.commitProperties();
                              if (_sourceChanged)
                                        setState("showVideoPlayer");
                                        _sourceChanged = false;
                    override protected function createChildren():void
                              super.createChildren();
  trace("createChildren fired in CatVideoPlayer");
  //_videoStage = new Sprite();
  //addChild(_videoStage);
                    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                              super.updateDisplayList(unscaledWidth, unscaledHeight);
                     * Convert the current screen to a bitmap and mask it to show stageVideo.
                    private function convertStageToBitmap():void
                              var bitmapData:BitmapData = new BitmapData(FlexGlobals.topLevelApplication.width, FlexGlobals.topLevelApplication.height);
                              _stageBitmap = new Bitmap();
                              _vidMask = new Sprite();
                              _vidMask.graphics.beginFill(0x000000);
                              _vidMask.graphics.moveTo(0, 0);
                              _vidMask.graphics.drawRect(0, 0, _defaultWidth, _defaultHeight);
                              _vidMask.graphics.endFill();
  //bitmapData.draw(this);
                              bitmapData.draw(FlexGlobals.topLevelApplication.document);
                              _stageBitmap.bitmapData = bitmapData;
                              _stageBitmap.cacheAsBitmap = true;
                              _vidMask.cacheAsBitmap = true;
  //addChild(_vidMask);
                              _stageBitmap.mask = _vidMask;
  //addChild(_stageBitmap);
  //backgroundImg_mc.visible = false;
  //playerWindow_mc.visible = false;
  //initVideo();
                     * Handles the mouse clicks that occur on UI components.
                     * @param e
                    private function handleInterfaceClick(e:Event):void
                              e.preventDefault();
                              switch (e.target.name)
  case "playBtn_mc":
                                                  setState("showVideoPlayer");
                                                  break;
  case "closeVideo_mc":
                                                  setState("closePlayer");
                                                  break;
  default:
  //do default
                     * Plays the video using StageVideo if supported.
                    private function initVideo():void
                              var nc:NetConnection = new NetConnection();
                              nc.connect(null);
                              _ns = new NetStream(nc);
                              _obj = new Object();
                              _ns.client = _obj;
                              _ns.bufferTime = 2;
                              _ns.client = _obj;
  //_obj.onMetaData = MetaData;
  //_obj.onCuePoint = CuePoint;
                              if (_stageVideoAv)
  //use stageVideo
  trace("using stage video in CatVideoPlayer.initVideo()");
                                        _sv = stage.stageVideos[0];
                                        _sv.addEventListener(StageVideoEvent.RENDER_STATE, onRender);
                                        _sv.attachNetStream(_ns);
  else
  //fallback to video class
  trace("using normal video in CatVideoPlayer.initVideo()");
                                        _vd = new Video(_defaultWidth, _defaultHeight);
  //_vd.x = 152;
  //_vd.y = 143;
                                        addChild(_vd);
                                        _vd.attachNetStream(_ns);
  //addChild(videoUI_mc);
                              _ns.play(_source);
                    private function onAddedToStage(event:Event):void
  trace("onAddedToStage fired in CatVideoPlayer");
                              stage.scaleMode = StageScaleMode.NO_SCALE;
                              stage.align = StageAlign.TOP_LEFT;
                              stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, onStageVideoAvailability);
                    private function onRender(e:StageVideoEvent):void
//                              if (!videoUI_mc.fsMode)
//                                        _sv.viewPort = new Rectangle(152, 143, 720, 480);
//                              else
                                        _sv.viewPort = new Rectangle(0, 0, 640, 360);
                    private function onStageVideoAvailability(e:StageVideoAvailabilityEvent):void
                              _stageVideoAv = (e.availability == StageVideoAvailability.AVAILABLE);
                              initVideo();
                     * Animate the video player's UI states.
                     * @param currentState The different states the player is in.
                    private function setState(currentState:String):void
  trace("setState fired in CatVideoPlayer");
                              switch (currentState)
  case "showVideoPlayer":
  //playBtn_mc.visible = false;
  //addChild(playerWindow_mc);
  //addChild(closeVideo_mc);
  //playerWindow_mc.visible = true;
  //closeVideo_mc.visible = true;
  //TweenLite.from(playerWindow_mc, 1, { alpha:0, onComplete:function(){ convertStageToBitmap(); } });
  //TweenLite.from(closeVideo_mc, 1, { alpha:0 });
                                                  convertStageToBitmap();
                                                  break;
  case "closePlayer":
  //removeVideoPlayer();
  //playerWindow_mc.visible = false;
  //playBtn_mc.visible = true;
                                                  break;
  default:
  //do default