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]

Comments
  1. frank
  2. Harry_m
  3. Ken
  4. Ken
    • John Crosby
  5. George
  6. SB

Leave a Reply

Your email address will not be published. Required fields are marked *