Introducing SimpleStageVideo

SimpleStageVideoIf you played with Stage Video, one of the coolest feature of Flash Player 10.2. You may have noticed that this it requires a little bit of code to be leveraged and you have to deal with multiple events (StageVideoEvent, StageVideoAvailability, VideoEvent) to be used properly. While writing the Stage Video article for the Adobe devnet I realized that the need of a wrapper would be useful for developers, and a few days ago I came across StageVideoProxy by Kenny Bunch which is intended to simplify the use of Stage Video. This confirmed the idea that AS3 developers will need little wrappers for Stage Video, I know Tinic has his own version too for his tests.

Here is my version a little bit different, which should handle all the situations, switching automatically from Video to StageVideo and vice versa when Stage Video becomes available or unavailable. It handles all this automatically so you do not have to worry about it. It also handles something I ALWAYS need in my video players, respecting the video ratio when giving a specific maximum width and height to fit a specific surface to display the video :

To use, it is very simple, just use a few lines code :

// specifies the size to conform (will always preserve ratio)
var simpleStageVideo:SimpleStageVideo = new SimpleStageVideo(800, 600);
// dispatched when stream can be played (NetStream object cannot be played before attached to the video object)
simpleStageVideo.addEventListener(Event.INIT, onInit);
// attach the NetStream to it
simpleStageVideo.attachNetStream(ns);
// display it (this actually initializes the object, when first time added to the display list)
addChild(simpleStageVideo);

One thing to notice is that even if we addChild the SimpleStageVideo object, the StageVideo object sits behind the stage, and the Video object used as a fallback will be added as a child of the stage so as a sibling of the main timeline. As a result, where you addChild the SimpleStageVideo object has no real impact on the nesting of the video surfaces.

Also, when working with the low level Stage Video APIs, you have to work with two events, StageVideoEvent.RENDER_STATE and VideoEvent.RENDER_STATE to detect how compositing is done and if hardware video decoding is performed. With SimpleStageVideo, those events are centralized through a single event called SimpleStageVideoEvent.STATUS which gives you access to the hardwareCompositing, hardwareDecoding and fullGPU properties :

private function onStatus(event:SimpleStageVideoEvent):void
{
	// informs you about the decoding, compositing states and if full GPU acceleration is performing
	var hardwareDecoding:Boolean = event.hardwareDecoding;
	var hardwareCompositing:Boolean = event.hardwareCompositing;
	var fullGPU:Boolean = event.fullGPU;
}

If you need to resize the video surfaces, use the resize API which does it automatically for you while preserving the image ratio :

simpleStageVideo.resize(stage.stageWidth, stage.stageHeight);

If you need to force the fallback from Video to StageVideo and vice versa for performance benchmarking, just use the toggle API :

simpleStageVideo.toggle(!inited);

Of course, when toggling, the SimpleStageVideoEvent.STATUS is dispatched every time, to let you know about the decoding, compositing, useful for logging, debugging, and performance benchmarking. A SimpleStageVideoToggleEvent.TOGGLE is also dispatched to inform you about the current video object used internally.

This can be useful if you need to draw the content of the video on a BitmapData. As the StageVideo object is not a DisplayObject, you cannot draw it, but you can use the toggle API, then wait for the SimpleStageVideoToggleEvent.TOGGLE, and then draw the underlying Video object used as a fallback, and there you go, you have your video content rasterized.

If you need to access the underlying Video and StageVideo objects you can use the proper getters :

var underlyingStageVideo:StageVideo = simpleStageVideo.stageVideo;
var underlyingVideo:Video = simpleStageVideo.video;

To view a live demo of it, click here (Flash Player 10.2 required). To download SimpleStageVideo, check the simplestagevideo project.

Comments (31)

  1. Cool wrapper !

    When you work with StageVideo, you have to implement something like that, so thank you for this implementation ;)

    Armetiz.

    Wednesday, December 29, 2010 at 10:35 am #
  2. Neat! Thanks for sharing.

    Wednesday, December 29, 2010 at 10:48 am #
  3. Really Cool! Flash getting more interesting and serious…..

    Wednesday, December 29, 2010 at 5:30 pm #
  4. Vic wrote:

    What is the license?

    Thursday, January 20, 2011 at 6:25 am #
  5. Benz wrote:

    Hey Thibault,
    Is there any documentation on the requirements on the codec? I have some H264 files which get the full performance boost and some which only get composition support. Is there anything one needs to take care of (datarate, dimensions…)?
    This information is extremely important to us so it would be great if you have some hints.
    Thanks
    Benjamin

    Tuesday, February 8, 2011 at 3:22 pm #
  6. Thibault Imbert wrote:

    Hi Benz,

    As long as the video is H.264 constrained baseline or main or high profile that should work.

    Let me know,

    Thibault

    Wednesday, February 9, 2011 at 2:40 am #
  7. yaka wrote:

    Hi,

    I have tried the simplestagevideo in Flex4.5. I have ran into one problem.

    The video (music) is playing but the picture is not visible and the sprite is added to the stage in the application.

    If I turn on Redraw regions in flash debugger I can even see the region where the video is supposed to be playing.

    To attach the SimpleStageVideo to the stage I used that “trick” where I pass it to a constructor of a UIComponent derived class and I add that one to the stage…

    Any ideas what could I’ve done wrong? How should this be used in Flex4.5 if the way I’m using it is wrong.

    Thank you!

    Sunday, February 13, 2011 at 7:03 pm #
  8. you’ve been writing up some amazing articles on the topic. thanks for that.
    i’ve made a simple video on getting started with stageVideo didn’t go into depth as you have been more how to get it running. 18 minute vid

    http://everythingfla.com/quickies/stageVideo

    thanks again!

    Monday, February 14, 2011 at 4:29 pm #
  9. Thank you Thibault!
    I used your class to do my own little demo: http://8088.nl/vp

    By the way my demo doesn’t have a preloader yet. When I load the StageVideo SWF into a preloader SWF it stops working. Any idea why?

    Monday, February 14, 2011 at 10:55 pm #
  10. anon wrote:

    I have the same issue as Yaka, though am using the OSMF build with StageVideo support. Flex 4.5 app and I cant get the picture to show up, but sound plays fine.

    Monday, February 14, 2011 at 11:46 pm #
  11. Thibault Imbert wrote:

    Hi Pieter,

    Looks great! Nice! ;)

    Ben,

    Nice video, I will use it too for people interested about Stage Video, thanks!

    Thibault

    Wednesday, February 16, 2011 at 8:34 am #
  12. maumau wrote:

    missed StageVideoAvailabilityEvent

    Friday, February 18, 2011 at 10:07 pm #
  13. Flasheur wrote:

    Looks really great, thanks!

    Monday, February 28, 2011 at 4:55 pm #
  14. Alex wrote:

    I know it must work but the damm StageVideoProxy class wont compile for me!!!

    I downloaded it from http://code.google.com/ using the latest version of Burrito and I get a compile error:
    1046: Type was not found or was not a compile-time constant: StageVideoAvailabilityEvent. SimpleStageVideo.as

    I’m not a rookie and am finding this very frustrating 4 hours wasted!! please help Thalibut, how come your code doesnt compile out of the box?

    Thursday, March 3, 2011 at 5:16 pm #
  15. Alex wrote:

    This guy is having the same problem too

    http://www.solid-thinking.com/blog/?p=469

    I think this needs addressing.

    Thursday, March 3, 2011 at 5:19 pm #
  16. Alex wrote:

    For stagevideo configuration help see Lee Brimelow’s excellent tutorial: http://www.gotoandlearn.com/play.php?id=134

    Monday, March 7, 2011 at 5:44 pm #
  17. Has anyone had any luck with hardware decoding (compositing works fine)? On this demo, it always reads as false for me. Is it how this video is encoded, or maybe the several machines I’ve tried this out on don’t have GPUs to handle it?

    Sunday, May 8, 2011 at 7:57 pm #
  18. It is incredible that GPU support isn’t provided on a very standard machine. Shame.

    MacBook Pro
    2.26 GHZ Intel Core 2 Duo
    2 GB Ram
    NVIDIA GeForce 9400M

    Wednesday, May 11, 2011 at 8:21 pm #
  19. John O wrote:

    I’ve also had issues with StageVideo and trying to find what hardware requirements are for GPU decoding. I’ve tried on 2010 iMac and 2011 Macbook Pro. Both have ATI cards. I’ve also noticed other issues with StageVideo and OSMF 1.6 (in beta, so I’ll cut some slack). I wrote a blog post about it here and filed various JIRA reports: http://www.yapiodesign.com/blog/2011/05/09/stage-video-frustrations/

    Friday, May 13, 2011 at 11:41 pm #
  20. micha wrote:

    Would you mind putting a complete example here? Also: is it possible to play a stagevideo on AIR on Android now? i have an eee-pad-transformer here with latest Android (3.2) and it is my only target plattform for now :-)

    Wednesday, August 3, 2011 at 1:53 pm #
  21. lgerber wrote:

    Merci pour ce tuto.
    Air 3 Pre release apporte normalement le support de StageVideo sur Mobile. Cependant j’ai la même tablet que le post ci dessus et impossible de passer par StageVideo. Est ce qu’il existe des exemples qui fonctionne ou une limitation par machine qu’il est (trop) difficile à trouver

    Friday, September 16, 2011 at 9:47 am #
  22. lgerber wrote:

    (Ca y est j’ai enfin trouvé, il faut peut être faire un update sur le post pour Air Mobile, je ne savais même pas qu’on pouvait changer le renderMode avec Air)

    Don’t let renderMode default param (auto) in app.xml

    Work on Eee-pad-transfomer 3.2

    direct

    Friday, September 16, 2011 at 10:03 am #
  23. Peter.H wrote:

    I’m looking for advice on whether Adobe Air is a viable development platform for building a desktop video player app, to run over multiple monitors. Sometimes I need different video playing in different monitors, and sometimes I’ll want them to all play the same video.

    Most important questions are:

    1) Can Air play multiple h/ware-accelerated non-embedded videos at the same time, where the sound output of each video is directed to different audio devices?

    2) Can Air “clone” a non-embedded video, so that only one instance of decoding is done, but a clone image is displayed on multiple displayObjects, on different monitors (to ensure perfect sync); and also have the sound cloned to different audio devices?

    Saturday, October 29, 2011 at 1:47 pm #
  24. kasperkamperman wrote:

    Is it possible to place multiple stage videos next to eachother on the stage? I hear multiple audio streams, but only see one video visible. I know that the example centers the video on stage, so multiple videos probably will be centered on top of eachother. Before trying out I’d like to know if its technically possible at all.

    Thanks in advance and for this example as well.

    Tuesday, November 1, 2011 at 11:05 am #
  25. lgerber wrote:

    Est ce que StageVideo est OBLIGATOIRE pour le HLS sur ios ? (si c’est le cas autant dire que StageVideo est obligatoire sur ios vue les guidelines 9.4

    Video streaming content over a cellular network longer than 10 minutes must use HTTP Live Streaming and include a baseline 64 kbps audio-only HTTP Live stream)

    Thursday, November 24, 2011 at 7:37 pm #
  26. stever wrote:

    I’m using FB 4.5.1 and just downloaded the 11.1 debugger version of Flash. I get runtime errors if I use anything other than -swf-version=11. With that, I hear sound but don’t see video. Ideas?

    Saturday, December 3, 2011 at 7:47 pm #
  27. stever wrote:

    Sorry… my mistake, forgot to change the application-app.xml namespace to 3.1. Now I have -swf-version=14 but still no video, just sound.

    Sunday, December 4, 2011 at 6:52 pm #
  28. mrbbp wrote:

    Hello…
    Just a simple question, does it work on Flash Pro?
    I’m enable to have some think… and silent error!
    Have a complete exemple source like your live demo.

    anyway great work

    m.

    Friday, January 27, 2012 at 4:58 pm #
  29. Gude wrote:

    Hi, is this class works on Air 3.3 for iOS? ‘Cause I’m trying to implement on desktop works fine, but in Ipad even the normal video appears

    Wednesday, July 25, 2012 at 4:56 pm #
  30. Gude wrote:

    Got it!
    gpu on xml app.
    Thanks for your greatwork!

    Wednesday, July 25, 2012 at 5:10 pm #
  31. Patrick wrote:

    I have a video at 1080×1920, it’s an HD video playing on a vertical kiosk.
    var simpleStageVideo : SimpleStageVideo = new SimpleStageVideo( 1080, 1920 );

    It loads but the video scales to 1096×1096

    Something in the ratio code is over riding the source video…how do I change that?

    Thanks!

    Monday, January 14, 2013 at 8:42 am #

Trackback/Pingback (1)

  1. [...] A great blog entry and sample code, also by Thibault Imbert: http://www.bytearray.org/?p=2571 [...]