Posts tagged "Stage Video"

Stage Video and Ad Insertion Plug-In for OSMF

OSMF 1.6 (pre-release “Sprint” 1) introduced Stage Video support. With Sprint 2, we wanted to see how well the implementation works for advertisement scenarios, so we created a sample plug-in for ad insertion.

Our intent is to provide the best Stage Video support in complex, multiple video scenarios and at the same time we’d like to establish a set of best practices related to implementing advertisement plugins.

Getting the source code

The source code is in the OSMF SVN repository and you can get it directly from these locations:
svn checkout http://svn.code.sf.net/adobe/osmf/svn/osmf/trunk/plugins/AdvertisementPlugin
svn checkout http://svn.code.sf.net/adobe/osmf/svn/osmf/trunk/plugins/AdvertisementPluginSample

We have also uploaded the ZIP archive containing the source code to our SourceForge download section (check the OSMF 1.6 – Sprint 2 folder):
http://sourceforge.net/projects/osmf.adobe/files/

Using the plug-in with Strobe Media Playback

You can see a live demo of the plugin within Strobe Media Playback here:
http://osmf.org/dev/latest/advertisement-demo.html

Strobe Media Playback provides a mechanism that allows configuring and loading OSMF plug-ins through a very simple API.

A configuration snippet looks like this:

 var parameters =
 {
     src: "rtmp://example.com/mp4:sample.f4v",	   		 			
 
     // Load the Ad Plug-in
     plugin_ads: "AdvertisementPlugin.swf",
 
     // Configure the Ad Plug-in
     ads_preroll: "http://example.com/example.flv",
     ads_postroll: "http://example.com/example.flv",
     ads_midroll: "http://example.com/example.flv",
     ads_midrollTime: 20,
     ads_overlay: "http://example.com/example.flv",
     ads_overlayTime: 25
 };
 
 swfobject.embedSWF
 (  "StrobeMediaPlayback.swf",
     "StrobeMediaPlayback",
     640, 480,
     "10.1.0",
     "expressInstall.swf",
     parameters,
     { allowFullScreen: "true", wmode: "direct" },
     { name: "StrobeMediaPlayback" }
 );

You can view the source of the live demo for additional configuration samples.

Using the plug-in with your OSMF-based player

To use the plug-in in an OSMF-based video player, you’ll need to configure and load the plug-in using the OSMF API.

The AdvertisementPluginSample application demonstrates this:

 // This is a normal video player setup.
 var mediaFactory:MediaFactory = new DefaultMediaFactory();
 var mediaPlayer:MediaPlayer = new MediaPlayer();
 var mediaContainer:MediaContainer = new MediaContainer();
 var resource:URLResource = new URLResource("rtmp://cp67126.edgefcs.net/ondemand/mp4:mediapm/osmf/content/test/sample1_700kbps.f4v");
 var mediaElement:MediaElement = mediaFactory.createMediaElement(resource);
 mediaContainer.addMediaElement(mediaElement);
 this.addChild(mediaContainer);
 
 // Load the plugin statically
 var pluginResource:MediaResourceBase = new PluginInfoResource(new AdvertisementPluginInfo());
 
 // You can load it as a dynamic plugin as well
 // var pluginResource:MediaResourceBase = new URLResource("http://localhost/AdvertisementPlugin/bin/AdvertisementPlugin.swf");
 
 // Pass the references to the MediaPlayer and the MediaContainer instances to the plug-in.
 pluginResource.addMetadataValue("MediaPlayer", mediaPlayer);
 pluginResource.addMetadataValue("MediaContainer", mediaContainer);
 
 // Configure the plugin with the ad information
 // The following configuration instructs the plugin to play a mid-roll ad after 20 seconds
 pluginResource.addMetadataValue("midroll", "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv");
 pluginResource.addMetadataValue("midrollTime", 10);
 
 // Uncomment the following lines to see a pre-roll, overlay, and post-roll ad.
 // pluginResource.addMetadataValue("preroll", "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv");
 // pluginResource.addMetadataValue("postroll", "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv");
 // pluginResource.addMetadataValue("overlay", "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv");
 // pluginResource.addMetadataValue("overlayTime", 20);
 
 // Once the plugin is loaded, play the media.
 // The event handler is not needed if you use the statically linked plugin,
 // but is here in case you load the plugin dynamically.
 // For readability, we don’t provide error handling here, but you should.
 mediaFactory.addEventListener(
    MediaFactoryEvent.PLUGIN_LOAD,
    function(event:MediaFactoryEvent):void
    {
       // Now let's play the video - mediaPlayer has autoPlay set to true by default,
       // so the playback starts as soon as the media is ready to be played.
       mediaPlayer.media = mediaElement;
    });
 
// Load the plugin.
mediaFactory.loadPlugin(pluginResource);

Implementation details

We chose to use the MediaPlayer API instead of the ProxyElement, SerialElement, or ParallelElement APIs. There are a few reasons why we wrote custom control code instead of using the composition APIs:

  • We have full control over the pre-buffering of the ads.
  • We don’t change the properties or traits of the main media.
  • We wanted to provide an example of how the MediaPlayer API can be used inside an OSMF plug-in.

The plug-in relies on getting references to both the MediaPlayer and the MediaContainer instances. The player is responsible for passing them to the plug-in as configuration metadata.

Implementing a mid-roll scenario involves the following steps:

  1. Pre-buffer the ad.
  2. Once the ad is ready to be played, pause the main video.
  3. Remove the main video from the MediaContainer and add the ad to it instead.
  4. Once ad playback has finished, remove the ad from the MediaContainer and add the main video back.
  5. Resume main video playback.

For displaying an overlay ad, we simply add the ad to the same MediaContainer and configure its layout.

These are some starting points. We encourage you to check the source code, and let us know what you think.

References

For a discussion of Stage Video in OSMF, see the OSMF Developer’s Guide. You can find the latest version of the dev guide in the latest OSMF sprint drop zips:
http://sourceforge.net/projects/osmf.adobe/files/

For more on writing plug-ins with OSMF, see the OSMF Plug-In Developer’s Guide:
https://sourceforge.net/nf/redirect/?path=http%3A//osmf.org/dev/osmf/OtherPDFs/osmf_plugin_dev_guide.pdf

Check some Stage Video related articles and content here:
http://www.adobe.com/devnet/flashplayer/stagevideo.html

Technical details about our current implementation:
http://blogs.adobe.com/osmf/2011/02/stage-video-in-osmf.html

Getting started with Stage Video support in OSMF and Strobe Media Playback:
http://blogs.adobe.com/osmf/2011/02/getting-started-with-stage-video-support-in-osmf-and-strobe-media-playback.html

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

Stage Video in OSMF

Stage Video support, newly available with Flash Player 10.2, is now available in the latest OSMF (version 1.6, Sprint 1)  library. We’re offering some background on the “what,” “why,” and “how” of Stage Video in OSMF, with the hope of getting valuable feedback on the current implementation from our open source community.

Guiding Principles

Because of the great performance improvements that Stage Video provides, OSMF will now automatically use Stage Video whenever it is available. As a player developer using OSMF, you won’t need to worry about any Stage Video-related workflows – they are handled seamlessly.

If you have a player that uses features which are currently unsupported by Stage Video, you can still use OSMF 1.6 and exercise the (simple) option to disable Stage Video support. Your player can still be upgraded to OSMF 1.6 to take advantage of the latest bug fixes and improvements, while leaving Stage Video support aside.

Also, a website hosting an OSMF player isn’t required  to ask its users to upgrade their Flash Player version to 10.2. A site owner might want to ask his users to upgrade, especially if serving HD content, but OSMF doesn’t enforce this in any way.

The Stage Video Workflows

To add Stage Video support to a video player without using OSMF, you would need to handle workflows such as the following:

  • Monitoring when Stage Video becomes available or unavailable.
  • Making sure that videos are positioned correctly when switching from Video to Stage Video.
  • Keeping track of the instances that are currently in use when working with multiple Stage Videos.

You would also need to create a suite of automated unit tests and test these workflows on different operating systems and Flash Player-enabled devices.

By using OSMF, all these aspects are now handled for you. (And, at the same time you become part of a growing open source community that continuously contributes to the quality of this framework.)

One-Line Disabling of Stage Video Support

To turn off Stage Video support in an OSMF player, simply add the following snippet to your video player code before you create any media element:

OSMFSettings.enableStageVideo = false;

Flash Player Versions and OSMF Compilation Targets

Currently, OSMF is available in two variants:

  • OSMF for Flash Player 10.0 – This is the variant that provides the core OSMF features and the largest possible installed Flash Player base.
  • OSMF for Flash Player 10.1 – This variant contains support for additional 10.1 features such as Multicast, HTTP Streaming, playback of protected content, and Stream Reconnect.

Until Flash Player 10.2, if you didn’t use any of the 10.1 features, you didn’t need to worry about the OSMF 10.1 APIs at all. There are, in fact, many OSMF customers still using the 10.0 variant.

However, with the release of Flash Player 10.2, even developers who aren’t using any 10.1 features probably will want to make use of Stage Video, if possible. Therefore, instead of adding one or more additional OSMF compilation targets at this point, we decided to keep the current two variants and add Stage Video support to them both. Whichever OSMF variant you choose, you get Stage Video support by default.

Feedback Wanted

We’d love to hear about your experience with using the Stage Video support in OSMF.

In particular, we’d like to get feedback on the following:

  • Do you need additional access to Stage Video APIs?
  • If yes, what use cases would you try to implement, and how would you need to be notified of the Stage Video state changes?

Thanks!

Stage Video in OSMF is here!

We are pleased to announce the first sprint drop of OSMF 1.6!

The key feature of this sprint drop is support for Stage Video, a new feature in the recently released Flash Player 10.2.  Stage Video is a full hardware accelerated video pipeline, which enables playback of 1080p video while consuming only 1-15% of the CPU on a common Mac or Windows computer.

Adobe continues to evolve our video platform, enabling publishers to offer the best user experience possible, and Stage Video is the most recent addition.  We hope that you will check out the latest OSMF sprint drop and provide us with feedback on our Stage Video implementation.