1 Reply Latest reply on Sep 28, 2010 7:04 AM by DenisKokorin

    How to place some DisplayObject over OSMF VideoElement?


      I have successfully built an live stream application. It shows video from IP-camera via media server.

      Now I need to handle user actions like click and area selection.

      The problem is I can't draw area selection borders over VideoElement.displayObject. It is Video, so graphics lays lower than video.


      I decided to make some MediaElement that has DisplayObjectTrait like this:

      public class DisplayObjectElement extends MediaElement
           private var sprite: Sprite;
           public function DisplayObjectElement(sp:Sprite)
                sprite = sp;
           override protected function setupTraits():void{
                addTrait(MediaTraitType.DISPLAY_OBJECT, new DisplayObjectTrait(sprite));


      and use DisplayObjectElement and VideoElement as children of ParallelElement:


      container = new MediaContainer();


      videoElement = new VideoElement();


      //some graphics to test
      selectionObject = new Sprite();
      selectionObject.graphics.beginFill(0xff0000,1 );
      selectionObject.graphics.drawCircle( 0, 0, 8 );

      selectionElement = new DisplayObjectElement(selectionObject);


      var parElement:ParallelElement = new ParallelElement();




      mediaPlayer = new MediaPlayer();
      mediaPlayer.media = parElement;
      videoElement.resource = new URLResource("url to camera stream");


      But selectionObject wasn't added to display list. Even when video is shown selectionObject.parent is null.


      So I want to lay this selectionObject over VideoElement (with the same size and coordinates) and handle user actions and draw area selection borders on it.


      I found simular solution here http://blog.six4rty.ch/2010/06/15/osmf-interactivespriteelement/ but it doesn't work for me.

      I'm using OSMF 1.5.


      How can I add my own control (Sprite or DisplayObject) over Video using OSMF framework?

        • 1. Re: How to place some DisplayObject over OSMF VideoElement?
          DenisKokorin Level 1

          I subclassed MediaElement without knowing of it's lifecycle:

          MediaElement constructor calls setupTraits. And in DisplayObjectElement I call super() and then set up sprite = sp.

          So when setupTraits() is called sprite == null.


          Working DisplayObjectElement class looks like this:

          public class DisplayObjectElement extends MediaElement
               public function DisplayObjectElement(sp:Sprite)
                    addTrait( MediaTraitType.DISPLAY_OBJECT, new DisplayObjectTrait(sp) );