HTTP Dynamic Streaming: Simple HDS Playback

In my last few posts i’ve covered:

  • 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:
    [dm]13[/dm]
  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 FilesAdoebFMSwwwrootvod

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://osmf.org/configurator/fmp/

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

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 ‘

The settings should resemble the following:
HDS Flash Media Playback Settings

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()
    [as3]var mediaFactory:MediaFactory = new DefaultMediaFactory();[/as3]
  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’
    [as3]var resource:URLResource = new URLResource( “http://office.realeyes.com:8134/vod/hds-sample/sample.f4m” );[/as3]
  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.
    [as3]var element:MediaElement = mediaFactory.createMediaElement( resource );[/as3]
  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.
    [as3]var mediaPlayer:MediaPlayer = new MediaPlayer( element );[/as3]
  6. Create a local variable named mediaContainer typed as a MediaContainer. Set it equal to a new MediaContainer.
    [as3]var mediaContainer:MediaContainer = new MediaContainer();[/as3]
  7. Call the addMediaElement() method on the mediaContainer object, passing the element object in as the only argument.
    [as3]mediaContainer.addMediaElement( element );[/as3]
  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.
    [as3]addChild( mediaContainer );[/as3]
  9. The completed class should resemble the following:
    [as3]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 );
    }
    }
    }[/as3]

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: [dm]12[/dm]

Getting Started with HTTP Dynamic Streaming

As described in the first post in this series: What is Dynamic Streaming?, HTTP Dynamic Streaming (HDS) allows for the delivery of streaming content over the HTTP protocol. Streaming video over HTTP requires some knowledge and preparation. The following is a rundown and description for each of the components involved with HTTP streaming.

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
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:

HTTP Dynamic Streaming Packaged Files for a short video 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 over HTTP
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:

Scrubbing HTTP Dynamic Streaming Video Content
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:

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

What is HTTP Dynamic Streaming?

HTTP Dynamic Streaming FlowUntil now video content delivery over HTTP has been delivered in a progressive manner, meaning to view part of or seek to a specific location in the video you have to wait for that part to download. RTMP allows for the ability to seek to any point in the video content via streaming, but requires a server technology such as the Flash Media Server to do this. HTTP Dynamic Streaming or HDS combines HTTP (progressive download) and RTMP (streaming download) allow for the ability to deliver video content in a steaming manner over HTTP. This means:

  • 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.

F4Fragment ExtractorAt 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.