This article assumes you are new to using Flash Media Server and are interested in how to stream media files from Flash Media Server to iOS.
All
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:
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).
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.
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).
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).
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).
If the data looks correct, click the Save button and choose to save the file in the FMS webroot.
Playing video in iOS involves either an iOS browser or an iOS app, using either AIR or native functionality. These examples show you how.
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>
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 {}
}
}
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:
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.
More Like This
Tutorials & Samples Flash Media Server Forum More
Tutorials
Samples
