In this article you'll learn how to create a simple video player for streaming 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 Professional to develop and compile a simple player for A4TV using the Open Source Media Framework (OSMF).

The A4TV runtime requires developers to 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
OSMF MediaPlayerSprite class

Configuring the development environment

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

Follow these steps to set up your environment:

Download and install Flash Professional CS5.5.
Install Flash Professional in the desired location on your machine. Your install directory is known as $FlashRoot.
Launch Flash Professional and create a new AIR document.
If the Welcome screen is displayed, select AIR in the Create New section; if the Welcome screen is not displayed, choose File > New to access the New File dialog box.
Select AIR and click OK to close the dialog box.

Flash Professional CS5.5 uses AIR 2.6 by default—which requires the AIR 2.6 namespace. Since A4TV 2.5.1 requires the AIR 2.5 namespace to run properly, you must configure your player to use AIR 2.5. 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. Flash Professional does not provide OSMF classes, so you must import the OSMF 1.6 SWC file into the Library. Follow these steps to configure the project to use AIR 2.5 and the OSMF 1.6 SWC file:

Open the Publish Settings dialog by choosing File > Publish Settings.
In the Publish Settings dialog box, set the Player option to AIR 2.5.
Click the wrench icon next to the Player option to access the AIR Settings dialog box.
In the Profiles section, uncheck all of the check boxes except the one next to TV. Click OK.
Ensure the Script option is set to ActionScript 3.0.
Click the wrench next to the Script option to open the Advanced ActionScript 3.0 Settings dialog box.
In the Library path tab, click the Flash Player icon to open the Browse to SWC file dialog box.
Browse to the location of the OSMF.swc file you downloaded previously.
Select the SWF file and click Open. The OSMF.swc file is listed in the Library tab.
Click OK to close the Advanced ActionScript 3.0 Settings dialog box and then click OK again to close the Publish Settings dialog box.
Choose File > Save to save the Flash project as tvPlayer.fla.

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

We will use the OSMF MediaPlayerSprite (MPS) class. MPS is a wrapper class providing access to the core functionality of the MediaPlayer, MediaContainer, and MediaFactory classes. The code calls for the URL to a manifest file (.f4m) for playing HDS content; however, you can use URLs for progressive download or RTMP streaming from FMS:

With the tvPlayer.fla file open in Flash Professional, create a new layer named Actions and click its first frame.
Open the Actions panel (Window > Actions).
Create the following variables:

        var tvURL:URLResource = new URLResource($url_to_HDS_manifest.f4m);
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.

Add a new line then make a call to the init function (which is created in next step):

init();

Add two new lines and create the init function signature:

        function init():void
{

}

Add the following lines to 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.

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

        import org.osmf.media.MediaPlayerSprite;
import org.osmf.media.URLResource;
import flash.events.Event;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.StageQuality;
import org.osmf.layout.LayoutMetadata;
import org.osmf.layout.ScaleMode;
import flash.system.Capabilities;

var tvURL:URLResource = new URLResource("http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m");
var player:MediaPlayerSprite = null;

init();

function init():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;
   trace("here");
   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 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 Professional CS5.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

05/17/2013	HDS-Live playback stops after some time
01/30/2013	Live stream problem with FMS 4.5 + FMLE
05/24/2013	Use s3 bucket as the vod folder
05/24/2013	How do I fix a "Failed to create listener for dapter_defaultRoot_,IP,port 8080 message?

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

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

Download

Support & Learning

Buy

Company