In this article, you will get an overview of how to use Flash Media Server 4.5 to stream video content to iOS devices including the iPod Touch 4, iPhone, and iPad.

Streaming to iOS devices requires these five basic steps:

Set up server
Encode videos
Deploy encoded videos to server
Create and deploy the manifest file
Play video

Set up server

The first step in the process is to download and install Flash Media Server (FMS). Flash Media Server 4.5 is available for Windows and Linux servers, and can be downloaded from here. Once you have downloaded and installed the server, you can test your installation by launching the FMS Administrator console (see Figure 1).

Figure 1. The file location of the FMS Administrator console. If you see the Administration Console login screen appear, you have verified that the server is properly installed.

Encode videos

The next step is to ensure that you have your video files properly encoded to support playback on iOS devices. Current versions of iOS can play back h.264-encoded MP4 files. A number of tools are available to encode your source files, include Adobe Media Live Encoder (AMLE) and Adobe Media Encoder (http://www.adobe.com/products/mediaencoder.html), as well as many other commercially available hardware encoders. The articles below will give you advice on choosing the proper encoding profiles for your video assets, based on the devices you wish to target. In most cases, you will want to have your video encoded to several bit rates to allow for Adaptive Streaming, which will allow the playback device to determine the best-quality video it can currently play, based on factors including bandwidth, processor utilization, and others, depending on the circumstances.

The following articles show a number of suggestions for how to properly encode your videos for iOS.

Deploy encoded videos to server

Once you have your assets properly encoded, place them in the vod subdirectory of the webroot in your FMS installation directory. In Figure 2, the name of each rendition is suffixed with an underscore, and a number indicating its bit rate (in kbps).

Figure 2. VOD subdirectory of the webroot in FMS server

Create and deploy the manifest files

To enable yourvideos to be played on an iOS device, you must create a manifest file (.m3u8). The manifest file is a text file that specifies the location and contents of a stream. Multiple formats are available for a manifest file, including single stream and multi-bitrate options. For more information, see Apple's HTTP Live Streaming Overview.

Flash Media Server 4.5 can generate a manifest file from a valid MP4 asset automatically, on demand. Once the MP4 asset is put into the vod directory in the FMS installation, it can be requested via a special URL. For instance, if the video file is called max1_1200.mp4, then the typical URL to access this content is:

http://some_url/vod/max1_1200.mp4

To access the on-demand M3U8 version of this asset for playback, use the URL:

http://some_url/hls-vod/max1_1200.mp4.m3u8

By changing "vod" to "hls-vod" and by adding the extension ".m3u8" to the end of the URL, you access the HTTP Live Streaming (HLS) application, installed with FMS, which performs the on-the-fly manifest generation.

When creating a multiple bitrate manifest, the M3U8 file looks like this:

        #EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=400000
/hls-vod/max1_400.mp4.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=800000
/hls-vod/max1_800.mp4.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1200000
/hls-vod/max1_1200.mp4.m3u8

    

Each #EXT-X-Stream-INF defines a specific rendition of the video asset, its bandwidth (in bytes), and the URL to the MP4 file for that specific stream.

While it is possible to create these files by hand, it is not necessary. FMS includes an F4M/M3U8 File Generator, which can be found in the tools\f4mconfig\configurator subdirectory of your FMS installation path. Double-clicking the f4mconfig.html file will launch the generator in your browser (see Figure 3).

Figure 3. F4M/M3U8 File Generator

When it launches, click the m3u8 tab on the top. Now you can enter the URL and bit rate (in kbps) for each of the files. Optionally, you can also specify the resolution as well as video and audio codec information, but these are not required. When you are done, you can verify the information by clicking View Manifest to open the file (see Figure 4).

Figure 4. M3U8 file

If the data looks correct, click the Save button and choose to save the file in the FMS webroot.

Playing video

Playing video in iOS involves either an iOS browser or an iOS app, using either AIR or native functionality. These examples show you how.

Launching video in an iOS browser

Playing the M3U8 or MP4 file is simple in HTML5. The following HTML5 code generates a basic video player. Notice the <video> tag in the body, which simply references the m3u8 URL on your server.

        <!DOCTYPE html>
<html>
    <head>
        <title>Simple Movie Player</title>
    </head>
    <body>
        <video src="http://fms_url/hls-vod/max1.mp4.m3u8"
            controls
            autoplay
            height=270 width=480>
        </video>
    </body>
</html>

    

Playing video in AIR for iOS app

Making use of the Adobe Integrated Runtime (AIR), you can write native iOS applications with ActionScript 3. Here is a sample app to play a video from your Flash Media Server in iOS.

        package{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.NetStatusEvent;
    import flash.events.StageVideoAvailabilityEvent;
    import flash.geom.Rectangle;
    import flash.media.StageVideo;
    import flash.media.StageVideoAvailability;
    import flash.net.NetConnection;
    import flash.net.NetStream;
     [SWF(backgroundColor="#000000", backgroundAlpha="0")]
    public class SampleVideoPlayer extends Sprite{
        private const STREAM_URL:String = "http://fms_url/hls-vod/max1.mp4.m3u8";
        private var netConnection:NetConnection;
        private var netStream:NetStream;
        private var video:StageVideo;
        private var addedToStage:Boolean;
        private var svEnabled:Boolean;

        public function SampleVideoPlayer(){
            super();
            addEventListener(Event.ADDED_TO_STAGE,onAddedToStage);
        }

        private function onAddedToStage(e:Event) :void{
            stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, onAvail);
            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        }

        protected function onAvail(event:StageVideoAvailabilityEvent):void{
            if(event.availability == StageVideoAvailability.AVAILABLE){
                svEnabled = true;
            }
            connectStream();
        }

        private function connectStream():void {
            if (!svEnabled)
                return;
            netConnection = new NetConnection();
            netConnection.addEventListener(NetStatusEvent.NET_STATUS, onConnectionNetStatus);
            netConnection.connect(null);
        }

        private function onConnectionNetStatus(event:NetStatusEvent):void {
            if (event.info.code == "NetConnection.Connect.Success")
                startStream();
        }

        private function startStream():void {
            netStream = new NetStream(netConnection);
            netStream.client = this;
            video = stage.stageVideos[0];
            video.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
            video.attachNetStream(netStream);
            netStream.play(STREAM_URL);
        }

        private function onMetaData():void {}
    }
} 

    

Playing video in native iOS app

It is also possible to create a native iOS application to play these same video assets with Objective C and Xcode. For more information on this, see Apple's iOS Developer Library here:

Where to go from here

While streaming video to multiple devices seems complicated, in reality, it's quite simple to make your video assets available to iOS applications via Flash Media Server (FMS). Please read the articles linked below as well the other articles we will be writing (coming soon) to understand how Flash Media Server can ease the process of streaming video to most other devices.

Tutorials & Samples

Tutorials

Samples

Flash Media Server Forum

05/21/2013	Recorded Webcam to IOS Device
05/10/2013	Installing Media Server 5.x on a Windows 2008 R2 server already running IIS 7
05/21/2013	change the wording for error "We are unable to connect to the network. We apologize for the in..."
05/21/2013	AMS on Centos

Streaming video to iOS with Flash Media Server 4.5

by Jeff Tapper

by Nathan Weber

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products