Mastering OSMF – Part 1: Working with the Flash Platform

This article begins a three-part series of hands-on development with Open Source Media Framework (OSMF). These articles provide a wide view of OSMF—what it has to offer and how to use it. It is geared towards developers or designers who have some development expertise and want to understand better how to take control of the power and benefits that OSMF has to offer.

Part 1 gets you started with the basics of OSMF and working with different media. Download, configure, and play back media with the Strobe Media Playback player—a precompiled, ready-to-deploy SWF file that is configured via the HTML source and the FlashVars.

Here's what we cover in the subsequent walkthroughs:

• Creating a very simple media player using OSMF and the MediaPlayerSprite class
• Breaking out the main control objects of an OSMF media player and learning how to manage them independently
• Extending the player to handle different kinds of media using a MediaFactory class and the generic MediaElement class

Start by downloading, configuring, and playing back media with the Strobe Media Playback player. The Strobe Media Playback player is a precompiled, ready-to-deploy SWF file that is configured via the HTML source and the FlashVars. Table 1 lists the currently supported FlashVars.

Table 1. Currently supported FlashVars in the Strobe Media Playback player

* Default value.

As we go through the steps, we'll show you the basic use of some of the most common configuration properties, including loading dynamic plugins and basic namespaces for their metadata.

Downloading the Strobe Media Playback player

Follow these steps to download the player and open it in its default configuration:

1. Download the mastering-osmf-pt1.zip file at the top of this page.
2. Unzip the contents of the player to a directory of your web server.
3. The ZIP file contains two versions of Strobe Media Playback: one version compiled for Flash Player 10.0 and another version compiled for Flash Player 10.1. The 10.1 version is required for DRM and HTTP Streaming. You must have Flash Player 10.1, or later, installed for the 10.1 version of the player to work correctly.
4. Open the StrobeMediaPlayback.html file for your version [/10.0/StrobeMediaPlayback.html or /10.1/StrobeMediaPlayback.html] in a browser. You should see the OSMF logo video play (see Figure 1).

Configuring the Strobe Media Playback player

Follow these steps to configure the player:

1. Save the StrobeMediaPlayback.html file as a new file named StrobeMediaPlayback_config.html and then open this file in a text editor.
2. Locate the autoHideControlBar property and change this from false to true .
3. Update the controlBarPosition property from bottom to over .
4. Open StrobeMediaPlayback_config.html in a browser. Now the control bar should be hidden until you roll over the player and it should now be positioned over the video that is playing (see Figure 2).

5. Return to the StrobeMediaPlayback_config.html file.
6. Locate the JavaScript that sets the value of the parameters variable. This is where the Strobe Media Playback player is configured.
7. Notice that the src attribute is set to an HTTP path—currently, the media player is loading and playing a progressive video.
8. Update the source value to rtmp://cp67126.edgefcs.net/ondemand/mediapm/osmf/content/test/akamai_10_year_f8_512K or another streaming URL of your own.
9. Save the file and run it in a browser. The new video should play without any issues (see Figure 3).

10. Be sure to check out Using_Strobe_Media_Playback.pdf included in mastering-osmf-pt1.zip for additional configuration settings.

Dynamic streaming with Strobe Media Playback

The Strobe Media Playback player also supports dynamic streaming. If the source is set to the URL for an F4M file, you can specify multiple streams and Strobe will switch between the streams as the user's bandwidth fluctuates in order to use the most efficient stream for the amount of bandwidth available. F4M is an XML file in a particular format, for which you can find the specifications on the OSMF website.

1. Open the StrobeMediaPlayback_config.html again and switch the src attribute in the HTML to "http://mediapm.edgesuite.net/osmf/content/test/manifest-files/ dynamic_Streaming.f4m" .
2. Save the file and open it up in a browser. The new video should play and adjust for any bandwidth changes (see Figure 4).

It is also possible to do dynamic streaming using a SMIL file as the source. However, this requires you to load in the SMIL plug-in, which is available from the OSMF SVN repository. Fortunately, loading plug-ins with Strobe is the next subject we'll cover.

Configuring plug-ins

The following section illustrates how to configure the Strobe Media Playback player to load in an external plug-in from a remote location. It requires the use of a local or remote web server to properly test due to local FlashPlayer security:

1. Return to StrobeMediaPlayback_config.html and add the following key value pairs to the parameters object:

The code should look something like this:

Note: Plug-ins are configured by first naming the plug-in as 'plugin_simple'. (The '_' character separates the plug-in name definition as well as the property name for the value to be sent to the plug-in.)

2. This configures the player to load SimpleOSMFPlugin.swf. When the plug-in loads, it calls the JavaScript alert method via ExternalInterface and passes the message defined by the plugin_simple property.
3. Save the file and run it in the browser (see Figure 5).

Note: To load plug-ins, the StrobeMediaPlayback_config.html must be loaded from an "http://" URL, not directly from your file system. This is due to Flash Player cross-domain security. The video should play back after the JavaScript alert has appeared and OK is clicked to clear the alert.

The Strobe Media Playback component offers a powerful out-of-box solution that is easy to configure and deploy. Sometimes that's just not enough, however, and tighter integration to an existing application or in-depth customizing is required. In these cases, building a custom player might be your best solution. In the next section, you'll learn how to create a simple media player using OSMF to play back progressive, streaming FLV, and H.264 media.

In this walkthrough, you will create a very simple media player using the OSMF and the MediaPlayerSprite object. The purpose is to see how to create the simplest form of an OSMF player and play back progressive, streaming FLV, and H.264 media.

Objectives

• Create the simplest form of a OSMF media player.
• Use the MediaPlayerSprite object to handle the heavy lifting and keep the component implementation simple.
• Simply and directly create a URLResource and VideoElement.
• Play back progressive and RTMP streaming media using the same player.
• Play back a streaming H.264 MPEG based file by applying the proper path prefix.

Setup

Follow these steps to set up the player:

1. Open the file WT01_SimplestPlayer.as in the {SAMPLES_PROJECT}/src directory.

Note: This file has been provided as a starting point for these walkthroughs.

2. Set the class file as the application file to compile. There are two different ways of doing this, depending on which program you are using to build your application:

• Flash Builder: Right-click WT01_SimplestPlayer.as and select Set as Default Application from the context menu that appears. This adds the project to the list of compilable applications. A blue dot on the file icon indicates that the file is the default application file.
• Flash Professional: Open OSMF_SampleTemplate.fla and save it as WT01_SimplestPlayer.fla. Change the document class for the file (in the Properties panel) to WT01_SimplestPlayer.

Building the simplest player

Follow these steps to build the player:

1. Under the "DECLARATION" comment, create a public variable named playerSprite that is typed as a MediaPlayerSprite object:

2. Locate the initPlayer method. This method is called when the media player starts up.
3. Inside the initPlayer method, set the playerSprite property equal to a new MediaPlayerSprite object:

4. Create a local variable named resource that is typed as a URLResource object. Set this equal to a new URLResource object and make sure you pass the static const variable PROGRESSIVE_PATH as the only parameter to the constructor:

5. Set the media property of the playerSprite object equal to a new VideoElement object, passing the resource variable as the only parameter to the constructor:

6. Call the addChild method, passing it the playerSprite :

7. The completed initPlayer method should look like this:

8. Save the file and run WT1_SimplestPlayer.as as a web application. The player should start up and play the progressive A Faery's Tale video (see Figure 6).

9. Change the path that is passed to the URLResource constructor to be STREAMING_PATH . Notice that this path starts with "rtmp://" and does not have a file extension. Save the file and run it as a web application. Now the Akamai Anniversary video should play (see Figure 7). The same code used for the progressive video playback works great for streaming media.

10. Update the path that is passed to the URLResource constructor to be STREAMING_MP4_PATH. Make note of the "mp4:" that is part of this path and that this path does have a file extension. When this version is run, the streaming H.264 Elephants Dream video should play (see Figure 8).

With OSMF, building a simple player with a lot of power is easy, but rarely is it enough just to show video. Often, finer-tuned control of the media loading and display process is needed. The next walkthrough will show how to separate some of the OSMF internals to provide greater control and understanding of the moving parts within a media player.

In this walkthrough, you will break out the main control objects of an OSMF media player. You will learn about the different components available to create an OSMF experience and how they can be managed independently instead of using the all-in-one MediaPlayerSprite object. In the end, it all works the same; but now there are separate instances to control the connection, playback, and visual display.

Objectives

This walkthrough will demonstrate the use of the following objects:

• NetLoader: To manage the external connection/loading for the VideoElement or MediaElement
• MediaPlayer: A non-visual item to manage the playback and control of a MediaElement
• MediaContainer: The visual container for managing the display and layout of a MediaElement

Setup

Follow these steps to set up the player:

1. Open the file WT02_SeparatingControl.as in the {SAMPLES_PROJECT}/src directory.
2. Set the class file as the application file to compile. There are two different ways of doing this, depending on which program you are using to build your application:

• Flash Builder: Right-click WT02_SeparatingControl.as and select Set as Default Application from the context menu that appears. This adds the project to the list of compilable applications. A blue dot on the file icon indicates that the file is the default application file.
• Flash Professional: Open OSMF_SampleTemplate.fla and save it as WT02_SeparatingControl.fla. Change the document class for the file (in the Properties panel) to WT02_SeparatingControl.

Breaking out the control objects

Follow these steps to break out the main control objects:

1. Remove the public var playerSprite and replace it with two variables: player , typed as a MediaPlayer object, and container , typed as a MediaContainer object:

2. Inside the initPlayer method, remove the line that created the playerSprite object as well as the other playerSprite references—including the addChild method. The initPlayer method should look similar to this:

3. Under the declaration of the resource variable, create a new local variable named netLoader and set it equal to a new NetLoader object. The NetLoader object enables you to have more control over the connection made to load the media.

4. Create a VideoElement object named element and pass the VideoElement's constructor the resource and netLoader variables as parameters:

Now, when the VideoElement is created, it will use your explicit NetLoader.

5. Set the player property equal to a new instance of the MediaPlayer object. Make sure to pass the element variable to the constructor:

6. Set the container property equal to a new instance of the MediaContainer object, and then call the addMediaElement method on the container property, passing it the element variable:

7. Call the addChild method and pass the container property to the addChild method. The completed initPlayer method should look like this:

8. Save and run the application. The Elephant's Dream video should play just as in Walkthrough 1. What this walkthrough has done is expose the control elements—NetLoader, MediaPlayer, and MediaContainer—of the media playback application.

Separating out the different controllers within a media player opens up the door to truly taking control of the capabilities of the player and the user experience when customization is needed. Toward that same goal, it lays the foundation for extending the implementation to take fuller advantage of the power of OSMF. Taking what has been completed already and adding support for any of the media supported by Flash Player (images, audio, video, and other SWFs) is the next step in harnessing the power of OSMF.

In this walkthrough, you will extend the media player so it can handle different types of media. This will show you how to use a MediaFactory and the generic MediaElement so the player can handle any of the supported media types without having to know what kind of media is being loaded. This way the player isn't tied to a VideoElement, for instance, that won't be able to play a SWF file or a dynamic multi-bitrate stream.

Objectives

• Gain a better understanding of specific media element types and their limitations when explicitly created.
• Implement support for the media playback application to handle different types of media (SWF, video, and audio) through the use of a MediaFactory.
• Use an F4M external XML-based file to define and load the appropriate content.
• Implement HTTP Dynamic Streaming via the use of an F4M file.

Setup

Follow these steps to set up the player:

1. Open the file WT03_HandlingDifferentMedia.as in the {SAMPLES_PROJECT}/src directory.
2. Set the class file as the application file to compile. There are two different ways of doing this, depending on which program you are using to build your application:

• Flash Builder: Right-click WT03_HandlingDifferentMedia.as and select Set as Default Application from the context menu that appears. This adds the project to the list of compilable applications. A blue dot on the file icon indicates that the file is the default application file.
• Flash Professional: Open OSMF_SampleTemplate.fla and save it as WT03_HandlingDifferentMedia.fla. Change the document class for the file (in the Properties panel) to WT03_HandlingDifferentMedia.

In this start file we added two additional paths for media: one that is a SWF file and another that is an F4M file for Dynamic Streaming. Try to play the SWF file in the media player's current state.

Handling different types of media

1. Change the variable that is being passed to the URLResource constructor from STREAMING_MP4_PATH to LOCAL_SWF .
2. Save and run the application. Nothing should happen because the VideoElement object doesn't know how to deal with a SWF file.

Using the MediaFactory object

1. Create a new class property named mediaFactory and typed as a DefaultMediaFactory object:

2. Inside the initPlayer method, remove the line that creates the netLoader object. Replace that line with a line that sets the mediaFactory property equal to a new instance of a DefaultMediaFactory object:

3. Replace the code that sets the element variable with code that calls the createMediaElement method on the mediaFactory property—you will need to pass the resource variable to the createMediaElement method. You will also need to change the variable type from VideoElement to MediaElement.

Note: The MediaFactory will generate the appropriate MediaElement for the content dynamically for you, thus abstracting the content type from the player capabilities.

Before:

After:

4. Save the file and run the application. This time the SWF file—a looping fade-in of the OSMF logo with text below it—should appear (see Figure 9).

5. Replace the LOCAL_SWF variable passed to the URLResource constructor with the DYNAMIC_STREAMING variable. This should play the dynamic stream defined by the loaded F4M file (see Figure 10).

6. The Flash Media Manifest contains information about a Flash media asset such as location of the media, multi-bitrate information, and additional metadata. The OSMF parses this XML-based file to create a DynamicStreamResource.

Note: If you'd like to see how to manually define a dynamic streaming resource, a sample has been provided in the DynamicStreamSample.as file.

In this tutorial, you learned many of the basics of working with the Open Source Media Framework. Understanding how to implement a media player and the core parts that can be separated to enhance the control and leverage the full spectrum media type support is just the first step on the path to mastering OSMF.

Part 2: Creating and customizing your player focuses on building the UI with the help of OSMF, and extending the media experience with compositions to handle more in-depth use cases and start to really let the power of OSMF shine.