Question

So I’m building a video player that appears in a nested (display) hierarchy, and I would really like an easy way to preserve the background. I have a Loader SWF that contains a bg, and another SWF (which contains the video player) that toggles between StageVideo and Video per the end user’s environment. I have StageVideo working, but it always shows below other content.

Now I know that this is the desired behavior for StageVideo, as it allows the GPU to render content directly to the screen without having to composite the video feed with display list content (http://help.adobe.com/en_US/as3/dev/WSe9ecd9e6b89aefd2-68d5ef8f12cc8511f6c-7fff.html), but I really want to be able to show my background (if only as a ‘picture frame’) behind the video player. Drawing a simple rectangular frame around the player such that it appears to have a bg will not work; I need to be able to also display images and other DisplayObjects behind the video player itself.

Are there any scenarios in which this might be possible? Any potential workarounds (even undocumented) that someone has discovered to resolve this problem?

Answer 1

Okay – got it. It turns out that putting all of the background content in a container, and masking the container with a frame-shaped mask will actually allow StageVideo to effectively render atop.

For example:

    bg_container.x = video_container.x;
    bg_container.y = video_container.y;
    set_frame_mask(video_width, video_height, frame_width, bg_container);

    // Helper function.
    protected function setFrameMask(width:Number, height:Number, frame_width:Number, container:Sprite):void
    {
        var frame:Sprite = new Sprite();
        frame.graphics.beginFill(0xFF0000);
        frame.graphics.drawRect(0, 0, width, frame_width);
        frame.graphics.drawRect(0, frame_width, frame_width, width - frame_width);
        frame.graphics.drawRect(width - frame_width, frame_width, frame_width, height - frame_width);
        frame.graphics.drawRect(frame_width, height - frame_width, width - 2 * frame_width, frame_width);
        frame.graphics.endFill();
        frame.x = container.x; 
        frame.y = container.y;
        container.mask = frame;
    }