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

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

  1. Pingback: Tweets that mention Getting started with Stage Video support in OSMF and Strobe Media Playback « Open Source Media Framework Blog -- Topsy.com

  2. superabe says:

    OSMF StageVideo implementation seems broken when using it in a Flex project that uses Flex 4.5.0.19786. The code below is for a minimal video player. On playback, I can hear the sound, but do not see any picture whatsoever.

    App.mxml

    SimpleVid.as
    package
    {
    import mx.core.UIComponent;

    import org.osmf.containers.MediaContainer;
    import org.osmf.elements.VideoElement;
    import org.osmf.media.MediaPlayer;
    import org.osmf.media.URLResource;

    public class SimpleVid extends UIComponent
    {
    public function SimpleVid()
    {
    var container:MediaContainer=new MediaContainer();
    addChild(container);

    var resource:URLResource=new URLResource(“rtmp://cp67126.edgefcs.net/ondemand/mp4:mediapm/osmf/content/test/sample1_700kbps.f4v”);

    var videoElement:VideoElement=new VideoElement(resource);
    container.addMediaElement(videoElement);

    var mediaPlayer:MediaPlayer=new MediaPlayer();
    mediaPlayer.media=videoElement;
    }
    }
    }

    mxmlc compiler args
    -locale en_US -swf-version=11 -define CONFIG::LOGGING true -define CONFIG::FLASH_10_1 true -define CONFIG::MOCK false -define CONFIG::PLATFORM true

    • Gelu says:

      Hi superabe,

      This is happening because when Stage Video is used the video is rendered under the default background of your flex application. In order to use Stage Video inside a Flex Project you have to set backgroundAlpha=”0″ for your mx:Application or other flex containers of your video.

      Hope this solves the problem,

      Gelu

      • Irfan says:

        Hi,
        I am getting “unknown Configuration variable swf-version” error in flash Builder.
        Strobe Source code is building successfully but its still showing this error.
        How i will fix it.
        Thanks And Regards

    • Irfan says:

      Hi,
      i imported the source code into Flash Builder.
      Its showing the following error
      “Unknown Configuration Variable ‘swf-version’ “.
      But still i am getting the Player in the browser without showing any video content .
      I am new to this field and doesn’t know much.
      please let me know what i have to do , so that i can fix it.
      thanks And Regards

      • Andrian Cucu says:

        Hi Irfan,

        You need to configure the latest flex SDK in your Flash Builder. Try to double-check the steps 3 and 4 in the workflow above.

        I assume that you are still using the Flex SDK which is bundled with Flash Builder and not the one downloaded from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero

        Hope this helps,
        -Andrian

        • Irfan says:

          Hi Andrian,

          I was using sdk4.1
          Thanks a lot for your help.

          I need another favour from you.
          My question
          1> How OSMF and Strobe Media Playback were integrated .
          Please suggest some resource that will be helpfull.

          I am beginner and don’t know much.
          Please suggest some tutorials so that i can master OSMF+Strobe media playback

        • Irfan says:

          Thanks a lot Andrian,
          finally got this post.
          i was able to load Advertisement plugin into strobe media playback.
          In the beginning i was not knowing much about the OSMF/Strobe media playback and was acting like a mad guy, but finally now i able to grasp the things.
          i was able to load advertisement plugin locally from wamp server as you have mentioned in one of post on strobe forum.
          But following same procedure , i am not able to load Youtube plugin in strobe media playback dynamically.
          I have placed my swf on localhost
          and made an alias which points to the directory where my source code is
          and flash builder loads the player from the http:localhost
          but still i am not able to load youtube plugin
          when i build strobe source code with youtube plugin its showing message
          “sorry for inconvenience we are not able to show the contents you have requested ”
          where i am doing wrong.
          Hope you will guide.
          Many thanks and regards
          Irfan

  3. superabe says:

    mxml tags for App.mxml got stripped from prev post

    App.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”
    xmlns:mx=”library://ns.adobe.com/flex/mx”
    minWidth=”955″
    minHeight=”600″
    creationComplete=”init(event)”
    xmlns:media=”org.osmf.media.*”]

    [fx:Declarations]
    [!– Place non-visual elements (e.g., services, value objects) here –]
    [/fx:Declarations]

    [fx:Script]
    [![CDATA[
    import mx.events.FlexEvent;

    import org.osmf.utils.OSMFSettings;
    public var simpleVid:SimpleVid

    protected function init(event:FlexEvent):void
    {
    OSMFSettings.enableStageVideo=true;

    simpleVid=new SimpleVid();
    addElement(simpleVid);
    }
    ]]]
    [/fx:Script]

    [/s:Application]

  4. Joa says:

    As soon as I’m using wmode: “direct” in my flex app most fonts (Labels, Lists, Forms, …) are getting hazy… Why? I’ve also tried using embedded fonts…