This tutorial is about how to configure your web server to stream your own movies on your web page just like video.google.com does.
Requirements:
1. Configuring Windows Server 2003 and IIS
Add a new web site in your IIS and don't forget to select "Run Scripts (such as ASP)".
Using this HTTP handler you can easily FLV streaming downloads just like . All you need is to install on your IIS 5.0/6.0 the following HTTP handler and to get this to work correctly, you will need to make sure that IIS handles request for .flv files. In your site's properties, click the "Home directory tab" and click the "Configuration" button. You'll get a form like this:
Add the entry for .flv, click edit, and copy the path in the executable field. This is the aspnet_isapi.dll for the current version of the .NET Framework of your virtual site. Cancel out of that dialog and click "add." Paste the path into the executable, use the extension .flv and set your verbs limited to "GET, POST, HEAD, DEBUG" like this:
Now any request for a .flv file on the site will be handled by ASP.NET. Since the server-wide machine.config file doesn't specify what class should handle the request, a default handler is used unless we add the following lines to the web.config file (of your web site):
2. Coding
Web.config
<httpHandlers>
verb="*" path="*.flv" type="FLVStreaming" />
</httpHandlers>
FLVStreaming.cs
using System;
using System.IO;
using System.Web;
public class FLVStreaming : IHttpHandler
{
// FLV header
private static readonly byte[] _flvheader = HexToByte("464C5601010000000900000009");
public FLVStreaming()
{
}
public void ProcessRequest(HttpContext context)
{
try
{
int pos;
int length;
// Check start parameter if present
string filename = Path.GetFileName(context.Request.FilePath);
using (FileStream fs = new FileStream(context.Server.MapPath(filename), FileMode.Open, FileAccess.Read, FileShare.Read))
{
string qs = context.Request.Params["start"];
if (string.IsNullOrEmpty(qs))
{
pos = 0;
length = Convert.ToInt32(fs.Length);
}
else
{
pos = Convert.ToInt32(qs);
length = Convert.ToInt32(fs.Length - pos) + _flvheader.Length;
}
// Add HTTP header stuff: cache, content type and length
context.Response.Cache.SetCacheability(HttpCacheability.Public);
context.Response.Cache.SetLastModified(DateTime.Now);
context.Response.AppendHeader("Content-Type", "video/x-flv");
context.Response.AppendHeader("Content-Length", length.ToString());
// Append FLV header when sending partial file
if (pos > 0)
{
context.Response.OutputStream.Write(_flvheader, 0, _flvheader.Length);
fs.Position = pos;
}
// Read buffer and write stream to the response stream
const int buffersize = 16384;
byte[] buffer = new byte[buffersize];
int count = fs.Read(buffer, 0, buffersize);
while (count > 0)
{
if (context.Response.IsClientConnected)
{
context.Response.OutputStream.Write(buffer, 0, count);
count = fs.Read(buffer, 0, buffersize);
}
else
{
count = -1;
}
}
}
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine(ex.ToString());
}
}
public bool IsReusable
{
get { return true; }
}
private static byte[] HexToByte(string hexString)
{
byte[] returnBytes = new byte[hexString.Length / 2];
for (int i = 0; i < returnBytes.Length; i++)
returnBytes[i] = Convert.ToByte(hexString.Substring(i * 2, 2), 16);
return returnBytes;
}
}
All you need now to stream your favorite FLV movies is a custom-made player which is fetching the contents passing to the request the ?start= parameter in order to seek the current position inside the video file.
Fabian Topfstedt has one available onto his site (get the player and place it in your site document root).
To use Fabian player you have to embed the following HTML code inside your page (and of course you should change the path to you .flv video and player):
There are three attributes of interest: Width and height define the resolution of FLV-Scrubber. If your videos’ native resolution is eg. 320×240 pixels, you might want to set width to 320 and height to 240. No problem if does not match, the video just will be scaled up or down. The third attribute is “flashvars”. That’s where you change the bahaviour and pass over information to FLVScrubber. You need to set at least file here, to link to the video you want to play. Everything else is optional (key/value pairs inside the flashvar attribute are separated using &). Here is a complete list:
- file=[URL] defines which video to show
- &autoStart lets the video start immediately
- &bufferTime=[number] changes the buffer time (default is 3 seconds)
- &clickTag=[URL] defines a target to call after video ended
- &credit=[(URL encoded) text] to show a credit like your company name in the context menu
- &link=[URL] defines a website to open when user clicks into the video
- &linkTarget=[blank,parent,self,top] defines the target of the website above (default: blank)
- &loop=true lets your video replay itself instead of ending (default: false)
- &previewImage=[URL] sets an backgroundimage as preview before playback starts
- &scrubbing=false use that, if you’re webserver has no enabled module for fake streaming (default: true)
- &seeking=false disallows the user to seek inside the video (default: true)
- &secondsToHide=[number] defines amount of seconds that the controlbar waits before hiding (0 means never, default is 5)
- &startAt=[number] defines the the second where the playback will start (default:0)
3. Converting your movie into FLV format
Now you need to convert/encode a video file (e.g. .avi) into a .flv by using ffmpeg and flvtool2 to index your in order to add the correct metadata inside the FLV file. You can do this by using the console (e.g):
ffmpege.exe -i test.avi test.flv
flvtool2.exe -U test.flv
or by using a GUI for ffmpeg like Avanti (http://avanti.arrozcru.com):
(don't forget to copy the ffmpeg.exe in your ../avanti/ffmpeg folder and load the "FLASH HQ" template from the Avanti menu). If you are a proud owner of Adobe Flash Professional 8 you can use the Flash 8 Video Encoder and you don't need ffmpeg and flvtool2 to encode and index your videos.
After encoding your video you can use a PLV Player (e.g. http://flv-player.softonic.de) to check if .flv file match your needs (e.g. correct resolution, bitrate...).
Now upload all file to your web server and your web site root should look like:
yourdirectory/App_Code/FLVStreaming.cs
yourdirectory/Web.Config
yourdirectory/default.htm
yourdirectory/FLVScrubber.swf
yourdirectory/yourmovie.flv