In this article, you'll learn how to create a simple video player that streams Adobe HTTP Dynamic Streaming (HDS) video to Internet-connected televisions, set-top boxes, and other devices. Playing video content on devices requires the AIR for TV (A4TV) 2.5.1 or later runtime. This article describes how to configure Adobe Flash Builder to develop and compile a simple player for A4TV using the Open Source Media Framework (OSMF).

The A4TV runtime requires developers use the proper AIR namespace in their application descriptor file. OSMF facilitates player development for consuming HDS content that cannot be consumed by the popular FLVPlayback or VideoDisplay components. The sample project described in this article uses the following:

AIR 2.5 SDK
Flex 3.6 SDK
OSMF MediaPlayerSprite class

Configuring the development environment

For the purposes of this article, you'll use the Flash Builder 4.5 development environment. If you prefer to use Adobe Flash Professional, see my companion article, Creating a simple OSMF video player for AIR for TV using Flash Professional.

Follow these steps to set up your environment:

Download and install Flash Builder 4.5 (or later).
Install Flash Builder to the desired location on your machine. Your install directory is known as $FlashBuilderRoot.

Flash Builder 4.5 uses the Flex 4.5 SDK by default. The minimum namespace requirement for AIR applications by the Flex 4.5 SDK is AIR 2.6. Since A4TV 2.5.1 requires the AIR 2.5 namespace to run properly, you must use the Flex 3.6 SDK—which has a minimum requirement of AIR 1.5 namespace. Then it is necessary to overlay the AIR 2.5 SDK on the Flex 3.6 SDK to ensure the proper functionality for A4TV 2.5.1 is included when the project is compiled.

Follow these steps to set up AIR 2.5 SDK on the Flex 3.6 SDK:

Download and install the Flex 3.6 SDK. Unzip the package to $FlashBuilderRoot\sdks (or save it to the desired directory).
Download the AIR 2.5 SDK. Overlay it onto the Flex 3.6 SDK by opening the AIR 2.5 SDK ZIP file.
Copy each file from the AIR 2.5 SDK into the corresponding directory within the Flex 3.6 SDK you installed in Step 1.

Note: If you are working on a Mac, be advised that copying a directory over another with the same filename will replace the original directory. Take care to copy only the individual files from the AIR 2.5 SDK into the corresponding directories in the Flex 3.6 SDK to ensure that you do not overwrite the directories.

The AIR 2.5 runtime adds Stage Video support for AIR applications. OSMF build 1.6 automatically enables Stage Video whenever it is available for performance improvements using hardware rendering and decoding of H.264 video. The Flex 3.6 SDK does not support OSMF, so it is necessary to import the OSMF 1.6 SWC file. Follow these steps:

Download the latest OSMF 1.6 (or later) build.
Access the OSMF 1.6 Downloads page and download the OSMF.swc file.

Next, configure your project to use the Flex 3.6 SDK and OSMF 1.6 SWC file:

Launch Flash Builder.
Create a new ActionScript Project by choosing File > New > ActionScript Project.
Enter a project name, tvPlayer, and choose the location to save the project.
Choose Desktop as the Application type.
In the Flex SDK version section, click the Configure Flex SDKs link to open the Preferences dialog box.
Click the Add button and then click the Browse button and navigate to select the newly configured Flex 3.6 SDK. Select the folder and then click OK.
If desired, modify the Flex SDK name and click OK to return to the New ActionScript Project properties dialog box.
Click the Use a specific SDK option and then use the menu to select the Flex 3.6 SDK.
Click the Next button. In the Library path tab, click the Add SWC button.
In the Add SWC dialog box that appears, click the Browse button and navigate to select the OSMF.swc file you downloaded previously. Select the OSMF.swc file and click OK. Then click OK again to close the Add SWC dialog box.
Click Finish to close the New ActionScript Project dialog box.

Now set the compiler directive to require Adobe Flash Player 10.2:

Open the tvPlayer project properties by right-clicking the project name in the Package Explorer and selecting Properties.
Select the ActionScript Compiler category in the Properties dialog box.
Add the following line to the Additional compiler arguments field:

-target-player=10.1

Next, set the application profile to TV in the launch configuration:

In the properties dialog box, select the Run/Debug Settings category.
Select the tvPlayer project, then click Edit to open the Edit Configuration dialog box.
Enter tv in the Profile options, click OK to close the Edit Configuration dialog box, and then click OK again to close the Properties dialog box.

At this point, you've finished setting up the development environment. In the next section, you'll learn how to create the OSMF video player.

Creating a simple OSMF Player

To build this sample project, you'll use the OSMF MediaPlayerSprite (MPS) class. MPS is a wrapper class that provides access to the core functionality of the MediaPlayer, MediaContainer, and MediaFactory classes. The code calls for the URL to a manifest file (.f4m) in order to play HDS content; however, you can also use URLs for progressive download or RTMP streaming from Flash Media Server (FMS).

Follow these steps to create the video player:

Open the tvPlayer.as file in your Flash Builder project.
Place your cursor after the opening curly brace for the tvPlayer class (near line 6) and press the Enter key.
While your cursor is at that location, enter the following code to declare the following variables:

        private var tvURL:URLResource = new URLResource($url_to_HDS_manifest.f4m);
private var player:MediaPlayerSprite = null;

Note: Replace the $url_to_HDS_manifest.f4m above with the full path to your manifest file, e.g. http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m.

Inside the tvPlayer constructor (near line 16), add the following code:

addEventListener(Event.ADDED_TO_STAGE, init);

Add two new lines after the closing curly brace for the tvPlayer constructor and create an init function:

        private function init(event:Event):void
{

}

Add the following lines of code to the init function body:

        stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.quality = StageQuality.HIGH;

player = new MediaPlayerSprite();
player.resource = tvURL;
player.mediaPlayer.autoPlay = true;

var layout:LayoutMetadata = new LayoutMetadata();
layout.scaleMode = ScaleMode.LETTERBOX;
layout.height = Capabilities.screenResolutionY;
layout.width = Capabilities.screenResolutionX;

player.media.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);

addChild(player);

    

Save tvPlayer.as and test the project.

After making these changes, the final version of the code should look like this:

        package
{
   import flash.display.Sprite;
   import flash.display.StageAlign;
   import flash.display.StageQuality;
   import flash.display.StageScaleMode;
   import flash.events.Event;
   import org.osmf.layout.LayoutMetadata;
   import org.osmf.layout.ScaleMode;
   import flash.system.Capabilities;
   import org.osmf.media.MediaPlayerSprite;
   import org.osmf.media.URLResource;
   
   public class tvPlayer extends Sprite
   {
      private var tvURL:URLResource = new URLResource("http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m");
      private var player:MediaPlayerSprite = null;
      
      public function tvPlayer()
      {
         addEventListener(Event.ADDED_TO_STAGE, init);
      }
      
      public function init(event:Event):void 
      {
         stage.scaleMode = StageScaleMode.NO_SCALE;
         stage.align = StageAlign.TOP_LEFT;
         stage.quality = StageQuality.HIGH;
         
         player = new MediaPlayerSprite();
         player.resource = tvURL;
         player.mediaPlayer.autoPlay = true;
         
         var layout:LayoutMetadata = new LayoutMetadata();
         layout.scaleMode = ScaleMode.LETTERBOX;
         layout.height = Capabilities.screenResolutionY;
         layout.width = Capabilities.screenResolutionX;
         
         player.media.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE, layout);
         
         addChild(player);
      }
   }
}
    

Where to go from here

After completing the steps provided in this article, you should have successfully created a simple, full-screen, skinless, Stage Video–enabled video player for AIR for TV devices using the OSMF MediaPlayerSprite class in Flash Builder 4.5.

If you'd like to research further, experiment with this sample project by extending this code to add functionality. You can also skin the video player and deploy it on AIR for TV–enabled devices.

To learn more about working with OSMF, see the following resources:

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Tutorials & Samples

Tutorials

Samples

Flash Media Server Forum

04/23/2012	FMS Issues
04/23/2012	FMLE 3.2 to FMS 4.5 - Over time the stream delay increases
04/23/2012	Live stream on FMS issues when reaching 1600 concurrent users
04/23/2012	How does main.asc work in signed folder ('live' or 'vod') with FMS4.5?

Creating a simple OSMF video player for AIR for TV using Flash Builder

by Sarge Sargent

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Configuring the development environment

Creating a simple OSMF Player

Where to go from here

More Like This

Tutorials & Samples

Tutorials

Samples

Flash Media Server Forum

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company