The Open Source Media Framework (OSFM) doesn’t respond well when you pass it a local F4M file path for playback. Playing back local HDS fragments is an edge case, but enough people have encountered this problem that I think it deserves a little attention.

Fixing the IndexHandler

The basics involve extending the HTTPStreamingF4FIndexHandler then overriding the constructFragmentRequest() method & removing the requirement that HTTP be part of the URI.

So, after you’ve created your new class that extends org.osmf.net.httpstreaming.f4f.HTTPStreamingF4FIndexHandler, add the following override:

override protected function constructFragmentRequest(serverBaseURL:String, streamName:String, segmentId:uint, fragmentId:uint):String
{
  var requestUrl:String = "";
  requestUrl += streamName + "Seg" + segmentId + "-Frag" + fragmentId;
  return requestUrl;
}

The original constructFragmentRequest() method looks like:

protected function constructFragmentRequest(serverBaseURL:String, streamName:String, segmentId:uint, fragmentId:uint):String
{
  var requestUrl:String = "";
  if (streamName.indexOf("http") != 0)
  {
    requestUrl = serverBaseURL + "/" ;
  }
  requestUrl += streamName + "Seg" + segmentId + "-Frag" + fragmentId;
  return requestUrl;
}

So you can see we just removed the “http” requirement.

Now you need to get OSMF to use your adjusted IndexHandler. This means you need to create a custom NetLoader, that creates a custom StreamingFactory & then the Factory creates your IndexHandler. Once you have all of this done, you can then create a custom MediaFactory (I usually just extend DefaultMediaFactory) and create a MediaFactoryItem that can handle your local F4M file resource, & specify your new NetLoader for the element that is returned.

Convoluted eh? Let’s break it down.

Creating the Factory

Since we are dealing with HDS content extend org.osmf.net.httpstreaming.f4f.HTTPStreamingF4FFactory & override the createIndexHandler() method. In this method set the indexHandler property equal to an instance of your IndexHandler (mine is named “LocalFileStreamingF4FIndexHandler”).

Example:

override public function createIndexHandler(resource:MediaResourceBase, fileHandler:HTTPStreamingFileHandlerBase):HTTPStreamingIndexHandlerBase
{
  indexHandler = new LocalFileStreamingF4FIndexHandler(fileHandler);
  return indexHandler;
}

Creating a NetLoader

Now we need our NetLoader – this is where the Factory is created. I extended org.osmf.net.httpstreaming.HTTPStreamingNetLoader & created an override for the createHTTPStreamignFactory() method.

Example:

override protected function createHTTPStreamingFactory():HTTPStreamingFactory
{
  return new LocalFileStreamingF4FFactory();
}

Creating a custom MediaFactory

Now we need to be able to injet this NetLoader into the system. So extend the org.osmf.media.DefaultMediaFactory & add a MediaFactoryItem that return a new VideoElement. Pass in an instance of your NetLoader to the the VideoElement constructor.

Example:

localFileStreamingNetLoader = new LocalFileStreamingNetLoader();
localHDSFileNetLoader = new LocalHDSContentNetLoader();
  addItem( new MediaFactoryItem( "com.realeyes.osmf.elements.video.httpstreaming", localHDSFileNetLoader.canHandleResource,
    function():MediaElement
    {
      return new VideoElement(null, localHDSFileNetLoader);
    }
  )
);

Specifying the canHandle and passing in the NetLoader

You can also see in the previous bit of code that the MediaFactoryItem asks for a canHandleResource function. This is where conditions are added to make sure the you’re working with the right type of media. For this situations you can default to the super’s canHandleResource() which checks the resource HTTP Streaming metadata.

Now you have a setup that can handle a local F4M file and the downloaded fragments. There are a couple of considerations you’ll need to keep in mind:

1. The fragments and F4M file must reside in the same directory. OSMF looks for the fragments in the directory that they F4M is in.
2. Multi-bitrate won’t work, unless you can download the fragments for all the bitrates and work out storage for them.

The provided examples is the least obtrusive way to get local HDS content to play. Alternatively  you can edit the HTTPStreamingIndexHandler and compile an OSMF swc to use for a quick and dirty fix.

A sample segment and its fragments

The system involves a client, an AIR application, requesting some remote HDS content (basically an F4M file). The client downloads the fragment data for the media item and writes it to disk. Instead of writing each fragment to a separate file, the fragment data is written to a single file. This part alone is pretty straight forward. The tricky part is when you want to play the content back.

A few problems needed to be overcome to get playback to work. First, to get the local fragments to playback, I needed to fix an issue in the OSMF framework that only accounts for requests for remote HDS fragments. This was accomplished by overriding the HTTPStreamingIndexHandler class and removing some code that only accounted for “HTTP” being part of the request. Second, and more importantly, I needed to intercept the request for the HDS fragment that is generated when OSMF is playing back HDS content, use the request to determine where the fragment’s byte data exists in local file that was created when the client downloaded the content. Then return this byte data to the rest of the OSMF code that parses it into FLV data to pass onto the appendBytes() method on the NetStream.

On top of that, we wanted to allow for playback while the fragments were still downloading. On OS X this wasn’t a huge deal because AIR on OS X can have multiple FileStreams open the same file. On Windows the file is locked when it is opened by the first FileStream that open the file. This is a problem because I want to write the downloaded fragment data to the file and I want to read fragment data for playback at the same time. This issue was solved with a little utility library that uses only 1 FileStream instance and manages read and write requests by queuing up requests and only allowing the requests to happen 1 at a time.

It was a huge headache and lots of time was spent in the OSMF rabbit hole but, I now have a great File IO library for AIR and I’m able to download and playback HDS content locally.

• Web server – I’m using XAMPP
• Text editor/IDE – I’m using Aptana & TextMate

Getting started with Sencha’s EXTJS

1. Download the Library – EXTJS 4.0.7: http://www.sencha.com/products/extjs/download/ext-js-4.0.7/1234
2. Unzip the contents of the download to a folder in root of your web server. I used /extjs. It should look something like the following image where “extjs” is at the root of your web server:
   

   Screen Shot of Unpacked EXTJS Files

3. Make sure your web server is running and open http://localhost/extjs/index.html in your browser.
4. Click the View the Examples button.
5. This is a good place to start to see what EXTJS is capable of.

At this point your ready to go. The Getting Started Guide has plenty of information to get your rolling and provide you will a decent knowledge set for EXTJS development.

You want to build something though right? So, let’s build.

1. Create a directory named “extplay” in the root of your web server.
2. In the extplay directory create a MyApp.html file.
   Usually EXTJS applications are contained in a single HTML file.
3. Open the MyApp.html file in your text editor.
4. Add the following HTML template code to your application:

   <!DOCTYPE HTML>
   <html>
       <head>
           <title>EXTJS Getting Started: MyApp</title>
           <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
           <script type="text/javascript" src="/extjs/ext-all.js"></script>
           <script type="text/javascript" src="app.js"></script>
       </head>
       <body></body>
   </html>

5. You will notice the app.js file in the HTML above.
6. Create the app.js file in your extplay directory and open it in your text editor.
7. Now we can write some code for our simple application.
8. Add the following code to the app.js file:

   Ext.onReady(function() {
    Ext.Msg.alert('Status', '<h1>Hello World!<\/h1>');
   });

9. Open MyApp.html (http://localhost/extplay/MyApp.html) in your browser. You should see something similar to the following image:
   

   The EXTJS Message Box

10. This is not a full-on EXTJS application – this just illustrates how you can use pieces and parts of EXTJS when and how you’d like.
11. Let’s create a EXTJS application.
12. Open app.js.
13. Replace the code in app.js with the following code:

    Ext.application({
       name: 'MyApp',
       launch: function() {
        Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
        {
         title: 'EXTJS: MyApp',
         html : 'Hello World!'
        }
       ]
      });
     }
    });

14. Open MyApp.html in a browser or refesh the browser if it is already open.
15. You should see something similar to the following:
    

    Sencha EXTJS: EXTJS Barebones Application

16. Here is what is going on in the code example:
1. Ext.application: Defines the application named “MyApp”
2. launch: The built in launch event creates a Viewport and sets it’s config object with a layout and items.
3. layout: Tells the Viewport to fit to the size of its parent (in this case the body of the HTML)
4. items: defines the children of the viewport. In this case a title and some HTML.

Now you’ve got an EXTJS 4 application up and running. What do you think?

I’ll follow this post up with some more information on what really goes on with the application, creating and managing the “items” or children of your application & how Sencha handles dependancies and deployment.

Resources:

• EXTJS 4.0.7: http://www.sencha.com/products/extjs/download/ext-js-4.0.7/1234
• Forum: http://www.sencha.com/forum/register.php
• Learning Center: http://www.sencha.com/learn/
• Getting Started Guide for EXTJS 4: http://docs.sencha.com/ext-js/4-0/#/guide/getting_started

In the near future I’ll post the SDOCML files that I’ve created for the code hinting and once I get the tool looking presentable and working efficiently, I’ll post the source of that to GitHub.

Here is the current version of the file. I’m not completely sure is has everything it needs. So, it is a work in progress and I’ll post updates as I create them.
extjs4.0-v0.1.sdocml

If you’d like the SDOCML for EXTJS 4.1 Beta
extjs4.1.beta-v0.1.sdocml

Recently I was tasked with finding a way to load test some AMF services built using PHP. In the past I had used jMeter for load testing. So, that is where I started. jMeter is a good tool, but not for AMF. A few extensions for jMeter have been built for AMF, but they are a PIA to setup.

I found a couple of tools that have made load testing AMF serivices a snap. Both of the tools are from SmartBear, and both are open source and free to use. Bonus!

1. Tool one: soapUI
2. Tool two: loadUI

The following are the basic steps to get a simple load test set up:

Setting up the project

1. Download and install soapUI (you’ll need Java too).
2. Start up soapUI.
   
3. Create a new soapUI project – File -> ‘New soapUI Project’
4. Name your project and click ‘OK’.
   
5. Add a new TestSuite – right-click your new project -> ‘New TestSuite’
6. Name your TestSuite and click ‘OK’
   
7. Create a new TestCase – right-click the new TestSuite -> ‘New TestCase’
8. Name your TestCase and click ‘OK’
   
9. Expand the Test Case
10. Right-click ‘Test Steps’, select ‘Add Step’ -> AMF Request.
    
11. Your project is set up and ready-to-roll. Save it.

Configuring the AMF Request

Now that we have a request set up we need to specify the arguments for the call. The is where I had troubles with jMeter – setting up the data required proxies and additional tools. There was no where to easily create & edit AMF object to pass along in the AMF request.

Enter soapUI. Lets say we have an API method called getMonkeys(). getMonkeys() requires an array of ids that specifies what monkeys we want in the list. The name of this parameter is ‘monkeyIds’.

1. In soapUI, right-click the AMF Request object and select ‘Open Editor’. You should see a window similar to the following:
   
2. In the text field for ‘Endpoint’ enter your service end point. For example: http://www.thekuroko.com/Monkey/amfphp/gateway.php
3. Enter the name of your call in the text field for the AMF Call setting: For example Monkey.getMonkeys
4. Just under the entry for Endpoint add property to the property list for the call by clicking the ‘Add Property’ button.
   
5. Enter ‘monkeyIds’ as the name of the property. If the value for this property were a simple value we could enter it into the value column. We need an array though.
6. To set the value for the property we’ll use the script window just under the property list.
7. In the script window, enter the following to create an Array that contains the id values 1,2 & 3 and assigns that Array to the monkeyIds parameter.
   parameters["monkeyIds"] = [1,2,3];
8. That is it. The call for getMonkeys() is set up.
9. To test the call click the little green arrow in the top left of the AMF Request editor.
10. If your paths and data are set up correctly, you should see an XML formatted response in the window to the right of the Script editor.
    

Creating and Running a Load Test

So now we have a test for a service, but we wanted to get some load testing done. If you’re looking for quick and simple load testing, you don’t have to go much further than soapUI itself. To create a load test in soapUI:

1. Right-click the ‘Load Tests’ node under ‘Test Steps’ -> ‘New Load Test’
2. Name the new load test and click ‘OK’
3. 2 steps. That’s it, the load test is set up. You can run the test “as-is”.

Now, this is a very simple load test and there are a ton of things you can add to the test to improve it to build more useful load tests within soapUI.

Running Load Test with loadUI

The other tool I mentioned, loadUI, is built to integrate with soapUI and make load testing “easier and more efficient”.

Once loadUI is installed can you execute the test case that you set up in soapUI in loadUI.

1. Right-click the test case, then select ‘Run with loadUI’.
2. You will be prompted to save the project, do so.
3. Select ‘Fixed Rate for the ‘Default Generator’ selection – this will determine how “clients” are generated for the load test.
4. Select ‘Statistics’ for the ‘Default Statistics’ selection – this will display a graph for the load test metrics.
   
5. Click ‘OK’.
6. loadUI will launch.
   
7. Click the ‘Play/Stop’ button to start the load test.
   

You can play around with the Generator settings to change the rate at which clients are created to see changes in the load test results while the load test is running.

To view a report of the results you can click the ‘Summary Report’ button in the top right of the loadUI interface.

This is just a simple load test and there are plenty of additional settings, assertions and analysis tools that can be added, adjusted and tweaked to improve the validity of the load tests.

Next Steps

Our next step is to integrate the tests into our Continuous Integration (CI) system. We use Jenkins and I saw this post about Automating loadUI and Jenkins (formerly Hudson). So, in theory it can be done. I’ll let you know what we get worked out on that end when we get there.

So far, I’m pretty excited about the two tools. They are very useful, and free to boot. Hey SmartBear – you really are smart, thank you – you rule.

Resources:

• soapUI
• loadUI
• Creating and Running LoadTests
• AMF: Getting Started
• Calling AMF Services

Don’t you wish you didn’t have to think about each and every device that Bob & Sally were using to play video?

We’ve got it covered with our Adobe Max 2011 BYOD Lab

“Video Player Development for Multiple Devices” .
(boring name right? I know, but still…)

WTF is BYOD? Stands for Bring Your Own Device – it just means you’ll need to bring your own devices to follow along. Here is what we’re looking at for setup:

• Install Flash Builder 4.5.1
• Install Flash Media Server 4.5
• Oh, and grab the lab files

We’ll go over concepts and code with you to take the tediousness out of developing video players.

Android? Yep.

iOS? Sure-nuff

Blackberry? Um….yeah, this is Flash baby – we got it.

We’ll show you how to AUTO-MAGICALLY detect the platform and screen size and let the player do the work for you.

If you’re attending our session, AWESOME. Thanks!

I’m sure you’d like to get going early right…I thought you might.

Go download the BYOD Lab Files

Hey, even if you’re not going to the session or Max, you’ll get some good sample files right?

While you’re at it, check out Jun Heider’s “Multiscreen Project Best Practices” session too.

• To stream live video over HTTP, the FMS uses the concept of live events.
• A live event is configured as part of a FMS application.
• An application configured for live events and can have multiple events.
• As with normal FMS applications the name of the directory is the name of the event.
• Live events can be configured for multi-bitrate streaming.
• The streams are packaged as fragments and written to disk on the fly. Meaning a player can access the content after the live stream has stopped.
• Live events support DVR and DRM.

Creating a live event

The steps involved in creating a live event are very similar to creating a normal FMS application with the addition of the Event.xml file. They are:

1. Create the FMS application {FMS_INSTALL}/applications/{APPLICATION_NAME}
2. In the application directory create the following directory sturcture: events/_defInst_/{EVENT_NAME}
3. Create an Event.xml file in the ‘events/_defInst_/{EVENT_NAME}’ directory and at a minimum specify the fragment & segment duration:

   <EventID>{EVENT_NAME}</EventID>
   <Recording>
   	<FragmentDuration>4000</FragmentDuration>
   	<SegmentDuration>10000</SegmentDuration>
   </Recording>

When you install the Flash Media Server a preconfigured live event is installed as well. The application is called ‘livepkgr’ with a live event called ‘liveevent’. The configuration exists in ‘{FMS_INSTALL}/applications/livepkgr/events/_defInst_/liveevent’

Packaging for Live Events

The Event.xml contains the configuration information for the live event. This includes:

• Segment and fragment settings
• Content protection (Flash Access) information

A sample Event.xml file with segment/fragment settings as well as content protection configuration:

<Event>
	<EventID>liveevent</EventID>
	<Recording>
		<FragmentDuration>4000</FragmentDuration>
		<SegmentDuration>10000</SegmentDuration>
		<ContentProtection enabled="true">
			<ProtectionScheme>FlashAccessV2</ProtectionScheme>
			<FlashAccessV2>
				<ContentID>foo</ContentID>
				<CommonKeyFile>common-key.bin</CommonKeyFile>
				<LicenseServerURL>http://dill.corp.adobe.com:8090</LicenseServerURL>
				<TransportCertFile>production_transport.der</TransportCertFile>
				<LicenseServerCertFile>license_server.der</LicenseServerCertFile>
				<PackagerCredentialFile>production_packager.pfx</PackagerCredentialFile>
				<PackagerCredentialPassword>hbXX5omIhzI=</PackagerCredentialPassword>
				<PolicyFile>policy01.pol</PolicyFile>
			</FlashAccessV2>
		<ContentProtection>
	</Recording>
</Event>

The parts to pay attention to in the file Event.xml file above are:

• SegmentDuration: The length of the segments in milliseconds. Each F4F file contains one segment.
• FragmentDuration: The length of the fragments in milliseconds. Each segment can contain multiple fragments.
• ContentProtection: Specifies if the content is protected as well as the details necessary for Flash Access content protection.

DVR & Multi-bitrate Live Events

To create a DVR or multi-bitrate (MBR) live event you will also need to create a Manifest.xml file in the live event folder (events/_defInst_/{EVENT_NAME}/Manifest.xml). This file will contain the DVR and MBR settings for the live event. Sample Manifest.xml file:

<manifest xmlns="http://ns.adobe.com/f4m/1.0">
  <dvrInfo beginOffset="0" endOffset="0"></dvrInfo>
  <media streamId="livestream1" bitrate="100" />
  <media streamId="livestream2" bitrate="200" />
  <media streamId="livestream3" bitrate="350" />
</manifest>

The <dvrInfo> node:

The <dvrInfo> node contains 2 attributes and controls the DVR functionality for the live event:

• beginOffset: The value (in seconds) is where the client players will begin viewing the stream. The default is 0 & negative values are treated as 0.
• endOffset: This value in seconds specifies how many seconds behind the current duration of the stream clients can view. The default is 0 & negative values are treated as 0.

Do not include this node if you do not want to use DVR functionality.

The <media> node:

Thenodes are used to specify the multi-bitrate (MBR) settings for the live event. The file is parsed and used by FMS to create the streams for the live event based on the settings specified in the media nodes. The manifest file is then updated with the nodes and data necessary (id, duration, bootstrap and metadata) for a client player to play the stream. The initial file should contain the following attributes for eachnode:

• streamId: The name of the publishing stream
• bitrate: The bitrate the stream was encoded at

If you do not want to use MBR do not include the media node(s).

Playing Back Live Events

Setting up an FMS application to publish a live event is as simple as creating the application (directory), and the Event.xml file. Of course adding MBR, DVR and content protection will add to the setup and configuration, but it is still a pretty straight forward process. Once the FMS application is configured we’ll need to do a couple of things:

1. Publish a stream to the application and associate the stream with the live event
2. Play back the stream in a player. We’ll use the Flash Media Playback to keep things simple.

Publish a Stream and Associate it with a Live Event

To publish a stream we’ll use the Flash Media Live Encoder. We’ll also need to associate the stream to the live event. This will be accomplished with a main.asc file and a bit of server side code. First we’ll cover the server side code, then we’ll set up the Flash Media Live Encoder.

Associating a Stream with a Live Event

I used the main.asc found in the ‘livepkgr’ application installed with Flash Media Server as a base (I’ve change a couple of things). You can download the main.asc I use here. The main.asc file just needs to go in the application directory ({FMS_INSTALL}/applications/{APPLICATION_NAME}). A little explanation of what is going on in the main.asc: The stream is associated to the live event in the onPublish() method (ln. 60 in main.asc):

s.liveEvent = liveEventName;

The variable ‘liveEventName’ is set to the stream name (default):

if( nv.localeCompare( "event" ) == 0 )
{
  liveEventName = nval;
  break;
}

or to the value passed in as the URL variable ‘event’ (ln. 34 – 44 in main.asc).

var nvpairs = new LoadVars();
nvpairs.decode(queryString);
for( var nv in nvpairs )
{
  var nval = nvpairs[nv];
  if( nv.localeCompare( "event" ) == 0 )
  {
    liveEventName = nval;
    break;
  }
}

Now to publish the stream.

Publishing the Stream Using Flash Media Live Encoder

To publish the stream we’ll need to connect to the FMS application and then pass the name of the event that we want to stream to. This is accomplished by adding URL variables to the stream name. For example: Make sure to replace {APPLICATION_NAME} with the actual name of your live event application and {EVENT_NAME} with the actual name of your event. You will also need to make sure you are using H.264 and set up any MBR streams: Click the start button, and the stream should start publishing to your FMS server.

Playing Back the Live Event

To play back the stream, we’ll use the Flash Media Playback. So go to http://www.osmf.org/configurator/fmpto setup the player.

1. Set the ‘Video Source’ to: http://{FMS_SERVER}:{FMS_HTTP_PORT}/live/events/{APPLICATION_NAME}/events/_defInst_/{EVENT_NAME}.f4m
2. Select Yes for ‘Are you using HTTP Sstreaming or Flash Access 2.0?’
3. Remove the value for ‘Poster frame file location’
4. Select Yes for ‘Autoplay Content’
5. Click the ‘Preview’ button.

The live event should start playing: There you go – live Events streamed over HTTP that supports multi-bitrate, DVR & content protection using Flash Access. In the next few articles I’ll dive into Flash Access and what is required to get your content protected and secured. Resources:

• Flash Media Server Developer’s Guide: http://help.adobe.com/en_US/flashmediaserver/devguide/WSd391de4d9c7bd609-52e437a812a3725dfa0-8000.html

I’ll make sure to post an update as soon as I get access to the site.

You can grab the slides on Slide Share, although they won’t be too useful.

The presentation was recorded – which will be more useful than the slides alone.  You can view the Connect session here: http://bit.ly/isfJmo.

Resources:

• F4V File Format Spec: http://www.adobe.com/devnet/f4v.html
• More detailed information on the F4M File Format: http://osmf.org/dev/osmf/specpdfs/FlashMediaManifestFileFormatSpecification.pdf
• Flash Media Playback: http://www.osmf.org/configurator/fmp/#
• Strobe Media Playback: http://osmf.org/strobe_mediaplayback.html

Next on the list of stuff I’d like to get up on the site is a write-up about creating Live events. So look for that in the next few days now that I have some room to breath.

• What is HDS? – Describing what HTTP Dynamic Streaming is and where it is useful
• Getting Started with HDS – The pieces and parts that you need to be familiar with to start using HDS video content

Now let’s get to the fun part. Let’s play back our HTTP Dynamic Streaming videos. First we’ll use the Flash Media Playback to play our HDS content, then we’ll build a simple OSMF player that plays back the same HDS content. Both of the examples that I’ll walk though use the Open Source Media Framework. OSMF provides the code necessary for the heavy lifting parts of HDS playback. This includes:

• Loading the F4M file
• Determining if miulti-bitrate (MBR) is available
• Determining the best MBR content for playback
• Extracting and inspecting the bootstrap data contained in the F4M file
• Using the bootstrap data to determine what segment and fragment to call based on the current time of the video playback
• Assembling the video data for playback as the fragments are loaded
• Playing back the video stream

There are a couple of things that we’ll need to make sure we have in place to get the players working:

1. Hopefully you have some HDS video files to play with. If you don’t, you can download some that I’ve packaged here:
   

   download: HTTP Dynamic Streaming Sample Files () added: 27/06/2011 clicks: 448 description: A sample video packaged for HTTP Dynamic Streaming

2. If you haven’t already, install and configure the HTTP Origin module on your Apache 2.2 web server, or install the Flash Media Server  and its pre-configured webserver.

Deploying the video content

Depending on how you’ve configured the HTTP Origin Module, the directory you will need to deploy your files to will differ from mine, so we’ll use ‘{HTTP_STREAMING_DIR}‘ to represent the path to the directory configured to deliver HDS content using the HTTP Origin Module. On my windows server my path is:
C:\Program Files\Adoeb\FMS\wwwroot\vod

Here are the 2 simple steps to deploying your files:

1. Upload: Copy your packaged HDS files to the {HTTP_STREAMING_DIR}
2. Verify: Check to make sure that the files are accessible by requesting the F4M file in a browser

* Note: you’ll also need to have a crossdomain.xml file if you are loading across domains. You can put this in the {HTTP_STREAMING_DIR} as well.

Playing the content back using Strobe Media Playback

Now that we have our content online, we can see if we can load it. I use the Flash Media Playback to test this. Flash Media Playback is a hosted OSMF player built by Adobe. If you want something that you host, check out the Strobe Media Player – another OSMF player provided by Adobe that you can download and deploy to your own server.

To use the the Flash Media Playback go to http://www.osmf.org/configurator/fmp/

You should see a page that looks similar to the following:

We’ll need to update a couple of things to get our HDS content playing:

1. Change the video source URL to point to the F4M file that you deployed your Apache server. Mine is ‘http://office.realeyes.com:8134/vod/hds-sample/sample.f4m’
2. Change the selected value for ‘Are you using HTTP Streaming or Flash Access 2.0?’ to ‘Yes’
3. You can remove the ‘Poster frame image’ and set your content to autoplay, but this is not required.

The settings should resemble the following:

Click the preview button and the video should begin playing. I’ve embedded the Flash Media Playback here with the above settings (except autoplay is false):

Now that we know the our HDS content is working correctly, let’s build a simple OSMF player that plays back the same content.

1. Create a new ActionScript 3 project in Flash Builder and name it ‘SimplePlayer’.
2. In the constructor of the class that is created for you ‘SimplePlayer.as’ create a local variable named mediaFactory and typed as a MediaFactory. Set mediaFactory equal to a new DefaultMediaFactory()

   var mediaFactory:MediaFactory = new DefaultMediaFactory();

3. Create a local URLResource variable named resource and set it equal to a new URLResource(). Pass the URLResource constructor the URL to your F4M file. Mine is ‘http://office.realeyes.com:8134/vod/hds-sample/sample.f4m’

   var resource:URLResource = new URLResource( "http://office.realeyes.com:8134/vod/hds-sample/sample.f4m" );

4. Create an MediaElement local variable named element and set it equal to the result of calling the createMediaElement() method on the mediaFactory object. Make sure to pass ‘resoure’ as the only argument to the createMediaElement() method.

   var element:MediaElement = mediaFactory.createMediaElement( resource );

5. Create a MediaPlayer local variable named mediaPlayer and set it equal to a new MediaPlayer, passing the constructor the element variable as the only argument.

   var mediaPlayer:MediaPlayer = new MediaPlayer( element );

6. Create a local variable named mediaContainer typed as a MediaContainer. Set it equal to a new MediaContainer.

   var mediaContainer:MediaContainer = new MediaContainer();

7. Call the addMediaElement() method on the mediaContainer object, passing the element object in as the only argument.

   mediaContainer.addMediaElement( element );

8. Add the mediaContainer to the display list by calling the addChild() method making sure to pass in the mediaContainer object as the only argument.

   addChild( mediaContainer );

9. The completed class should resemble the following:

   package
   {
     import flash.display.Sprite;import org.osmf.containers.MediaContainer;
     import org.osmf.elements.VideoElement;
     import org.osmf.media.DefaultMediaFactory;
     import org.osmf.media.MediaElement;
     import org.osmf.media.MediaFactory;
     import org.osmf.media.MediaPlayer;
     import org.osmf.media.URLResource;
     import org.osmf.utils.URL;
   
     public class SimplePlayer extends Sprite
     {
       public function SimplePlayer()
       {
         var mediaFactory:MediaFactory = new DefaultMediaFactory();
   
         var resource:URLResource = new URLResource( "http://office.realeyes.com:8134/vod/hds-sample/sample.f4m" );
   
         var element:MediaElement = mediaFactory.createMediaElement( resource );
   
         var mediaPlayer:MediaPlayer = new MediaPlayer( element );
   
         var mediaContainer:MediaContainer = new MediaContainer();
   
         mediaContainer.addMediaElement( element );
         addChild( mediaContainer );
       }
     }
   }

When you run this the video should play. There aren’t any controls, but the important thing to note here is that there wasn’t anything special we needed to do to playback our HDS content. We relied on OSMF’s DefaultMediaFactory to determine the type of media and play it back. You can download the project source here:

download: SimplePlayer.zip (19.14KB) added: 27/06/2011 clicks: 365 description: Flash Builder 4.5 project archive of simple OSMF player.

The files: The F4F and F4M file formats

The F4F file format specification (http://www.adobe.com/devnet/f4v.html) describes how to divide media content into segments and fragments. These segments and fragments are what make ‘streaming’ content over HTTP possible. Basically, the file is broken up into multiple pieces and parts when it is prepared for for HTTP streaming.

A sample segment and its fragments

These way the segments and each segments fragments are created is based on multiple factors such as the length of the video content, the the number of keyframes and the length specified for each segment. The result of packaging your video content for HDS delivery is a set of files that look similar to the following for a simple, single bit-rate file:

The set of files created by the f4fpackager for a short video clip.

From the image above:

• sample.f4m: This is an XML file created by the f4fpackager that contains the information necessary for a client player to playback the video file. There will be only one of these for each source video file.
• sampleSeg1.f4f: This segment file contains the fragments that the client player will request for playback. There can be multiple of these files for each source video file.
• sampleSeg1.f4x: This is an index file that contains specific information about the fragments inside the segment files. There will be one of these types of files for each segment file. The HTTP Origin Module uses the data in this file to determine the fragment to send back to the client after a request.

Each F4F file is a single segment and the segment can contain multiple fragments. So, if you inspect the HTTP requests as a media item is being played back you will see files being requested that map to a fragment within a segment. For example:

Segments and fragments being requested for HDS video

This request specifies to the HTTP Origin Module what segment’s fragment to pull out of the F4F file and deliver to the client for playback. These requests are based on where the time code of where the media item is during playback. So if you scrub to later in the video, the Requests might look something like the following:

Segments and fragment requests while scrubbing HDS video content

This allows the client to request any piece of the video content and start playing back almost immediately. You can control how the files are segmented and fragmented when preparing content with the f4fpackager. The basic concept is to balance the size of the fragment being delivered and the number of HTTP requests that a client needs to make for playback. Please note, the fragments may not be sequential, so you cannot rely on this when requesting content. The the fragments are based on the settings passed into the packager and can skip fragment numbers. So , you can expect to see fragment sequences like the following (no scrubbing involved):

1. sampleSeg1-Frag1
2. sampleSeg1-Frag2
3. sampleSeg1-Frag3
4. sampleSeg1-Frag5
5. sampleSeg1-Frag6

This doesn’t mean that the file is incomplete, it is just how the fragments were created by the packager.

The Details

The F4M FIle Format

The F4M or Flash Media Manifest file format contains the information about the package of files created when video content is packaged for HDS. The information included in the manifest file can include some or all of the following:

• Media location
• Media type
• Media bootstrap
• Multi-bitrate (MBR) availability
• Codecs
• Resolutions
• Digital Rights Management (DRM) authentication
• DVR information
• moov atom, metadata block and XMP metadata block

When playing back HDS video content, the F4M file is expected to be loaded as the ‘media file’. The client is responsible for inspecting the data included in the F4M file to authenticate (if DRM authentication is required), determine if MBR content is available and select the best MBR version of the content and then request the media from the server.

Sample of a simple F4M file with a single media item:

Installing and configuring the Apache HTTP Origin Module: http://help.adobe.com/en_US/HTTPStreaming/1.0/Using/WS7b362c044b7dd076-735e76121260080a90e-8000.html

• A streaming server technology is not required
• Clients can access and begin playing content ‘instantly’
• Clients can seek to points in the video content that have not yet downloaded.

…and all the above over the HTTP protocol.

There are a of couple things that you’ll need to consider when getting started with HTTP Dynamic Streaming.

First, a media server to stream the content is not required, but the Apache Web server with the HTTP Origin Module installed is. The HTTP Origin Module is a free to use Apache module provided by Adobe, and comes pre-installed and configured with the Flash Media Server when you install the bundled web server. We’ll cover the installation, set up and data flow for the HTTP Origin Module in a subsequent post.

Second, the video content will need to be ‘prepared’ for HTTP Dynamic Streaming before being deployed to your server. This means the workflow for content creation will need to be adjusted to accommodate the packaging of your video content into the F4F file format. There is a tool, the f4fpackager, that Adobe has created to do this for you and we will discuss the details of this tools and how you can use it later as well.

At Realeyes, we’ve done some some work with AIR and the F4F file format spec to create the The F4Fragment Extractor.  The F4FragmentExtractor is a utility for extracting the F4V fragments from the F4F files created by Adobe’s file packager for HTTP streaming. This means that you can deploy the fragments produced by this tool  to any Web server or cloud services like Amazon S3 and reap the benefits of HDS even without the HTTP Origin Module.

In the next few articles, we’ll look at:

• Getting Started with HDS
• Use cases for HDS
• Integrating HDS into your content creation workflow

Between now and when I get to the next post let me know if you have any questions or would like to see something specific about HTTP Dynamic Streaming in the comments.

• Apple pie “Koolaid”
• Hot fudge ice cream, espresso fudge cookie
• Homemade whipped marshmallow
• Strawberry yuzu sorbet with frozen olive oil
• Popcorn space foam
• Miracle fruit tasting
• Creme brulee with banana foster
• Coconut ice cream with brown sugar
• Braised pineapple and raspberry bubbles

Ian & The Eat Street crew will be in the parking lot (behind our offices at 940 Logan) filming Ian and his inventive cart Tuesday March 31st from 8:30 am until 3:30 pm.

Example:

navigator.pushView(MyNewView, dataObject);

This effectively calls the setting for the data property of the new View (MyNewView) object that is created.

Managing View Data

You could work with the data property on the View object directly. For instance, if the data object passed into the View via the pushView() method was a simple user object that contained a name property, you could bind the name property to a label control.

Example:

<s:Label id="name_lbl" text="{data.name}" />

Overriding the Data Property Setter

Usually though, you’d want to override the setter for the data property. Then you can type your object and work with it in a better manner.

Example:

protected var user:User;
override public function set data(value:Object):void
{
 super.data = value;
 user = value as User;
}

<s:Label text="{user.name}" />

So now we’ve got the data in the view. The next step is to manage the state of each view. With mobile apps you can’t count on the view staying around, so we’ll need to keep a tight control on the state of each view. That way we can bring the user right back where they expect to be when they come back to the app after a call for example. In the next post we’ll look into how to do this. Stay tuned.

This article has also been posted on the Realeyes website.