Getting started with Stage Video support in OSMF and Strobe Media Playback

Introduction

The guiding principle of the Stage Video implementation in OSMF is that the current API should allow a video player developer to upgrade to the latest version of OSMF and get the performance boost of Stage Video without having to modify their existing OSMF-based video players.  For more on the what, why, and how of Stage Video in OSMF, please check out our other blog post, Stage Video in OSMF.

Here I’d like to describe the new Stage Video-related features in Strobe Media Playback which you can use for troubleshooting your setup. After this, we’ll guide you through the process you can use for testing your video player with the latest OSMF codebase.

Strobe Media Playback – Watching Stage Video in Action

We have published a live Stage Video demo in our dev space on osmf.org. See it in here.

The player is instructed to show the Info Overlay at startup, so you should see the current version of the Flash Player installed in your browser. You can also see if the hardware-accelerated decoding and rendering is being used or not.

If you don’t have a version of Flash Player with Stage Video capability installed, the player will let you know about it:

You can download a version of Flash Player with Stage Video support here:
http://get.adobe.com/flashplayer/


At this point you should be able to check that Flash Player is properly installed and see it in action:

You can see the performance boost that Stage Video brings by comparing the CPU levels in a player that uses Stage Video against a player that doesn’t. To make this kind of comparison easy, we exposed the enableStageVideo property as a configuration setting in Strobe Media Playback. When set to false, the Video object is used, even if Stage Video is available:
http://osmf.org/dev/latest/debug.html?logFilter=videoClasses&enableStageVideo=false

Check the Stage Video workflow implementation in your OSMF-based video player

Now you are probably eager to test the performance of your video player with the exploratory implementation of Stage Video support in OSMF.

For this you’ll need to get the Flex SDK that contains the latest Stage Video APIs, you’ll need our source, and you’ll need to set up your development environment.

  1. Get the source code from our Sourceforge SVN space: svn checkout http://svn.code.sf.net/adobe/smp/svn/trunk
  2. Import the OSMF and StrobeMediaPlayback projects.
  3. Download the Flex Hero SDK (Flex 4.5 SDK – build 4.5.0.19786+) here: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero
  4. Add the new Flex SDK to Flash Builder (right click on any project, Properties, ActionScript Compiler, Configure Flex SDKs). Set the new SDK as the default.
  5. Check that you can run the StrobeMediaPlayback project without any issues.
  6. Link your video player to the OSMF project that was imported in step 2.
  7. Go to the compiler properties (right click on it, Properties, ActionScript Compiler) and set “Use specific version” to 10.2.
  8. In additional compiler arguments add   -swf-version=11
  9. Go to your HTML page and add wmode=direct to your parameters. Your embed snippet should look like this:

swfobject.embedSWF(
“StrobeMediaPlayback.swf”
, “StrobeMediaPlayback”
, 640
, 480
, “10.1.0”
, “expressInstall.swf”
, parameters
, {
allowFullScreen: “true”,
wmode: “direct”
},
,{
name: “StrobeMediaPlayback”
}
);

At this point you are ready to run your video player.

Normally, your video player should behave exactly as it did before switching to the exploratory version of OSMF.

Troubleshooting

If the video is not visible, check to see if you have an opaque DisplayObject in your display list that may be covering the Stage Video. To fix this issue, you can make it transparent, for example. This was the only issue that we had to fix in Strobe Media Playback before we got seamless video playback and a great performance boost!

Resources

Getting started with Stage Video, by Thibault Imbert:
http://www.adobe.com/devnet/flashplayer/articles/stage_video.html

Stage Video on Adobe Developer Connection:
http://www.adobe.com/devnet/flashplayer/stagevideo.html

Get a Stage Video-enabled Flash Player 10.2:
http://get.adobe.com/flashplayer/

Download the latest Flex Hero SDK: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero

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

Simplifying StageVideo with StageVideoProxy,
by Kenny Bunch from Dream Socket:
http://www.kennybunch.com/blog/2010/12/simplifying-stagevideo-with-stagevideoproxy/

Update February 19, 2010:

Here is some background on the underlying implmentation. Feedback wanted!
http://blogs.adobe.com/osmf/2011/02/stage-video-in-osmf.html