Stream on-demand media (HTTP)

Prerequisites for streaming on-demand media (HTTP)

To complete these tutorials, use the following software:

For more information, see Supported clients, encoders, codecs, and file formats and Pre-built media players.

Play a single on-demand media file over HTTP

Adobe Senior Content and Community Lead Jody Bleyle has created a screencast that walks you through similar steps: Stream on-demand video to Flash and iOS over HTTP.
  1. Install Flash Media Server 4.5 and choose to install Apache HTTP Server.

  2. Copy an F4V/MP4 file to the following location:

    rootinstall/webroot/vod

    Note: Replace rootinstall with the Flash Media Server installation folder.

    This tutorial uses the file sample2_1000kbps.f4v which installs with Flash Media Server to the rootinstall/webroot/vod folder.

  3. (Adobe HTTP Dynamic Streaming) To play the media in Flash Media Playback, do the following:

    1. Open Flash Media Playback in a web browser:

      http://www.osmf.org/configurator/fmp/

    2. Note: Flash Media Playback requires Flash Player 10.1 to support HTTP Dynamic Streaming. To see which version of Flash Player is installed on your computer, go to Adobe Flash Player.
    3. In Video Source, enter:

      http://localhost/hds-vod/sample2_1000kbps.f4v.f4m

      View full size graphic
      HDS on-demand streaming in Flash Media Playback

      Although the media file lives in the /webroot/vod directory, the URL request is /hds-vod. The path /hds-vod is a <Location> directive in the Apache httpd.conf file. When a request URL begins with /hds-vod, the server looks for media in the /webroot/vod folder and packages it for HTTP Dynamic Streaming. For information about the request URL syntax, see URLs for playing on-demand streams over HTTP.

    4. Select Yes under the question “Are you using HTTP Streaming or Flash Access 2.0?”.

    5. Clear the text from the Poster frame file location text box.

    6. Click Preview to update the embed code.

    7. Click the Play button to test the code.

    8. To use the player in your own HTML page, copy the embed code and paste it into the body of the page. Flash Media Playback is a compiled SWF file hosted by Adobe. For more information, see Flash Media Playback.

  4. (Adobe HTTP Dynamic Streaming) To play the media in Strobe Media Playback, do the following:

    1. Open the Flash Media Server sample video player in a web browser. Double-click rootinstall/samples/videoPlayer/videoplayer.html.

    2. In STREAM URL, enter:

      http://localhost/hds-vod/sample2_1000kbps.f4v.f4m

    3. Select VOD and click PLAY STREAM.

    4. To use the player in your own HTML page, copy the embed code and paste it into the body of the page.

    View full size graphic
    HDS on-demand streaming in the Flash Media Server sample video player
  5. (Apple HTTP Live Streaming) On iOS, enter the following URL in the Safari address bar:

    http://10.0.1.11/hls-vod/sample2_1000kbps.f4v.m3u8

    View full size graphic
    HLS on-demand streaming in Safari on an iPad

    To test in Safari on Mac OS 10.6, use the following HTML code:

    <video src="http://10.0.1.11/hls-vod/sample2_1000kbps.f4v.m3u8" controls="controls"></video>
Note: You can replace “localhost” and “10.0.1.11” with the domain name or IP address of the computer hosting Flash Media Server. If you’re using a Flash Media Server hosting provider, they can give you this value.

Play on-demand multi-bitrate media files over HTTP

Adobe Senior Content and Community Lead Jody Bleyle has created a screencast that walks you through similar steps: HTTP adaptive bitrate streaming to Flash and iOS.
  1. Install Flash Media Server 4.5 and choose to install Apache HTTP Server.

  2. Do one of the following:

    • Encode an F4V/MP4 file at 3 different bitrates.

    • Use the multi-bitrate sample files that install with Flash Media Server to the rootinstall/webroot/vod folder.

    This tutorial uses the following files installed to the webroot/vod folder:

    rootinstall/webroot/vod/sample1_150kbps.f4v

    rootinstall/webroot/vod/sample1_700kbps.f4v

    rootinstall/webroot/vod/sample1_1500kbps.f4v

  3. (Adobe HTTP Dyanmic Streaming) To stream multi-bitrate content, Flash and AIR media players request a set-level manifest file. This is a .f4m file that contains the location and bitrate of each stream. To create a set-level F4M file, do the following:

    1. Open rootinstall/Flash Media Server/tools/f4mconfig/configurator/f4mconfig.html in a browser.

    2. Select the f4m file type.

      View full size graphic
      Set-level F4M/M3U8 File Generator
    3. Stream URIs can be absolute or relative to a Base URI. Enter the following for the Base URI:

      http://localhost/hds-vod/

    4. Enter the following for each stream and click Add:

      Stream URI

      Bitrate

      sample1_150kbps.f4v.f4m

      150

      sample1_700kbps.f4v.f4m

      700

      sample1_1500kbps.f4v.f4m

      1500

    5. To view the file, click View Manifest. The manifest file looks like this:

      <manifest xmlns="http://ns.adobe.com/f4m/2.0"> 
        <media href="http://localhost/hds-vod/sample1_150kbps.f4v.f4m" bitrate="150"/> 
        <media href="http://localhost/hds-vod/sample1_700kbps.f4v.f4m" bitrate="700"/> 
        <media href="http://localhost/hds-vod/sample1_1500kbps.f4v.f4m" bitrate="1500"/> 
      </manifest>
    6. Click Save Manifest to save the file as sample1.f4m to rootinstall/webroot.

      The media player requests this file from a web server. This tutorial saves the file to rootinstall/webroot, but the file can be served from any location on any webserver. This file does not need to live on Flash Media Server. This file can have any name.

  4. (Apple HTTP Live Streaming)For multi-bitrate streaming, iOS devices request a set-level M3U8 variant playlist file that contains the location, bitrate, and optionally the codec of each stream. To create a set-level M3U8 file, do the following:

    1. If the File Generator tool isn’t open, double-click rootinstall/Flash Media Server/tools/f4mconfig/configurator/f4mconfig.html to open it in a browser.

    2. Select the m3u8 file type.

    3. Enter the Stream URI, bitrate, program-ID, and optionally a resolution and codec for each stream. Stream URIs can be absolute or relative. If they are relative, they are relative to the m3u8 file. The program-ID must be the same for each stream.

      Note: For information about supported codecs, see Apple HTTP Live Streaming Overview.

      This tutorial uses the following Stream URI settings:

      Stream URI

      Bitrate

      http://10.0.1.11/hls-vod/sample1_150kbps.f4v

      150

      http://10.0.1.11/hls-vod/sample1_700kbps.f4v

      700

      http://10.0.1.11/hls-vod/sample1_1500kbps.f4v

      1500

      View full size graphic
      Set-level M3U8 file in the Set-level F4M/M3U8 File Generator
    4. To view the file, click View Manifest. The m3u8 file looks like this:

      #EXTM3U 
      #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=150000 
      http://10.0.1.11/hls-vod/sample1_150kbps.f4v.m3u8 
      #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=700000 
      http://10.0.1.11/hls-vod/sample1_700kbps.f4v.m3u8 
      #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1500000 
      http://10.0.1.11/hls-vod/sample1_1500kbps.f4v.m3u8
    5. Click Save Manifest and save the file as sample1.m3u8 to the folder rootinstall/webroot.

      The media player requests this file from a web server. This tutorial saves the file to rootinstall/webroot, but the file can be served from any location on any webserver. This file does not need to live on Flash Media Server.

  5. (Adobe HTTP Dynamic Streaming) Flash Media Playback does not support set-level manifest files. To play the media, use Strobe Media Playback. Strobe Media Playback is used in the sample video player that installs with Flash Media Server.

    1. Double-click rootinstall/samples/videoPlayer/videoplayer.html to open it in a browser.

    2. In Video Source, enter the following:

      http://localhost/sample1.f4m

      View full size graphic
      HDS adaptive bitrate on-demand streaming in the Flash Media Server sample video player
  6. (Apple HTTP Live Streaming) On iOS, enter the following URL in the Safari address bar:

    http://10.0.1.11/sample1.m3u8

    View full size graphic
    HLS adaptive bitrate on-demand streaming in Safari on an iPad

    To test in Safari on Mac OS 10.6, use the following HTML code:

    <video src="http://10.0.1.11/sample1.m3u8" controls="controls"></video>

    For more information, see HTTP Live Streaming Overview in the iOS Reference Library.

See Also

Configure protected HTTP Dynamic Streaming (PHDS)

Configure protected HTTP Live Streaming (PHLS)

Configure set-level F4M/M3U8 files for multi-bitrate streaming

URLs for playing on-demand streams over HTTP

Use the following URLs to play on-demand streams over HTTP:

Client

Live or VOD

Single stream or Adaptive Bitrate

Request URL

Adobe HTTP Dynamic Streaming

VOD

Single stream

http://<fms-dns-or-ip>/hds-vod/<streamname>.<fileextension>.f4m

Apple HTTP Live Streaming

VOD

Single stream

http://<fms-dns-or-ip>/hls-vod/<streamname>.<fileextension>.m3u8

Adobe HTTP Dynamic Streaming

VOD

Adaptive bitrate

The media player requests a set-level manifest file:

http://<webserver-dns-or-ip>/<set-level-manifest>.f4m

The URLs in the set-level manifest point to the individual streams and use the following URL:

http://<fms-dns-or-ip>/hds-vod/<streamname>.<fileextension>.f4m

Apple HTTP Live Streaming

VOD

Adaptive bitrate

The media player requests a set-level variant playlist file:

http://<webserver-dns-or-ip>/<set-level-variant-playlist>.m3u8

The URLs in the set-level variant playlist point to the individual streams and use the following URL:

http://<fms-dns-or-ip>/hls-vod/<streamname>.<fileextension>.m3u8

The path /hds-vod is a <Location> directive in the Apache httpd.conf file. The directive tells the server to look for the content in the rootinstall/webroot/vod folder. It also tells the server to package the content for delivery to Flash and AIR over HTTP (called HTTP Dynamic Streaming or HDS).

The path /hls-vod is a <Location> directive in the Apache httpd.conf file. The directive tells the server to look for the content in the rootinstall/webroot/vod folder. It also tells the server to package the content for delivery to Apple HTTP Live Streaming.

Note: Apple HTTP Live Streaming supports live and on-demand streaming.

For adaptive bitrate streaming, the client requests a set-level manifest file. For HDS, this file is an .f4m file. For HLS, this file is a .m3u8 file. Set-level manifest files contain the paths to the physical locations of the media files. The paths to the media files must begin with /hds-vod or /hls-vod to tell the server to package them for HTTP.

More information

Content storage (HDS and HLS)