For years the only way to play Streaming Video in Flash was to create your own video player in the Flash or Flex authoring software. It was and is still not difficult if you were familiar with either of these applications as there are components for both environments that make it a fairly trivial task. With that said there are many people that are not familiar and do not have the time to get familiar with either of those applications but would still like to stream Flash video. Good news, there is a fully functional player that is installed with Flash Media Server 3.5 that is easy to configure and includes multi-bitrate support.
Inside the installation directory for the Flash Media Server you will find a “samples” directory and in that directory you will find a directory called “videoPlayer”. When you installed the Flash Media Server 3.5 you had an option to install Apache. You can confirm that your Flash Media Server installation is working simply by opening a browser on the same PC that has the Flash Media Server installation and browsing to http://localhost. When the page loads you should see the following image.
If the preceding page does not load it is most likely do to a conflict with another http server installed on the same PC. De install or turn off the other http server and browse to localhost, that should fix the problem. You may need to restart the PC for the changes to take effect. Once you know that the Flash Media Server installation is working correctly copy the “videoPlayer” directory to the webroot of the Flash Media Server installation directory which should resemble something like the following:
C:\Program Files\Adobe\Flash Media Server 3.5\webroot
Open the “videoplayer.html” file in a browser, scroll to the bottom of the page and select and copy the object and embed code in the white text box. Create a new blank html page and paste the object and embed code between the body tags of the new blank html page. The html with the object and embed tag (in blue) should look like the following:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
<object width=’640′ height=’377′ id=’videoPlayer’ name=’videoPlayer’ type=’application/x-shockwave-flash’ classid=’clsid:d27cdb6e-ae6d-11cf-96b8-444553540000′ >
<param name=’movie’ value=’swfs/videoPlayer.swf’ />
<param name=’quality’ value=’high’ />
<param name=’bgcolor’ value=’#000000′ />
<param name=’allowfullscreen’ value=’true’ />
<param name=’flashvars’ value= ‘&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&serverURL=rtmp:/vod/mp4:sample1_700kbps.f4v&DS_Status=true&streamType=vod&autoStart=true’/>
<embed src=’swfs/videoPlayer.swf’ width=’640′ height=’377′ id=’videoPlayer’ quality=’high’ bgcolor=’#000000′ name=’videoPlayer’ allowfullscreen=’true’ pluginspage=’http://www.adobe.com/go/getflashplayer’ flashvars=’&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&serverURL=rtmp:/vod/mp4:sample1_700kbps.f4v&DS_Status=true&streamType=vod&autoStart=true’ type=’application/x-shockwave-flash’> </embed>
</object>
</body>
</html>
Save the new html page in the same directory as the “videoplayer.html”.
C:\Program Files\Adobe\Flash Media Server 3.5\webroot\videoPlayer
Now we are going to edit the parameters that will allow you to use this player to play your own videos. The simplest way to play your own video using this player is to simply change the “serverURL” to reflect the location of the video you would like to stream. For instance the following example:
serverURL=rtmp://localhost/vod/mp4:sample1_700kbps.f4v
is referencing a video with the name “sample1_700kbps.f4v” in the following directory:
C:\Program Files\Adobe\Flash Media Server 3.5\applications\vod\media
When you stream MP4 or F4V files you need to add the prefix “mp4:” to the front of the file name. That is not the case with VP6. Do not forget that there are two “serverURL” parameters that you will need to change in the object and embed code (i.e. one for the object and one for the embed) so that the intended video plays in all browsers. Change the “serverURL” parameter to reflect the video that you would like to play. Just copy the video that you would like to play to the following directory:
C:\Program Files\Adobe\Flash Media Server 3.5\applications\vod\media
The name of the video that I am going to use for this example is “Redworkflow.f4v”. With that in mind the edited “serverURL” parameter should look like the following:
serverURL=rtmp://localhost/vod/mp4:Redworkflow.f4v
Since I am running everything off of the same PC I am using “localhost” for the server address. In a real environment you would substitute either the real server ip address or the dns name of the server for “localhost”. There is one additional change that you are going to want to make to the object and embed code and that is to change “dsControl” parameter from “manual” to “auto”. This setting allows the switching between streams to happen automatically.
When you run the html page in the browser the video should play. This example is simple and straight forward but will not provide for the best experience. Choosing a single video to stream ignores the fact that the internet and most networks will not provide a constant amount of bandwidth to most users. In other words you may start out playing video with out a problem only to find it skipping frames because someone on your network decided to download a large file at the same time that you were watching the video. The solution to this problem is “Dynamic Streaming“. Dyanamic Streaming adjusts to serve different quality streams based on the current capability of the viewer. The player that we have been using for this example supports “Dynamic Streaming” through the use of a smil file. You will notice that there is a file with the name “dynamicStream.smil” in the following directory.
C:\Program Files\Adobe\Flash Media Server 3.5\webroot\videoPlayer
That is the same directory where you saved the html page with the edited object and embed tag. Open the “dynamicStream.smil” in a text editor and you should see the following:
<smil>
<head>
<meta base=”rtmp://localhost/vod/” />
</head>
<body>
<switch>
<video src=”mp4:sample1_150kbps.f4v” system-bitrate=”150000″/>
<video src=”mp4:sample1_500kbps.f4v” system-bitrate=”500000″/>
<video src=”mp4:sample1_700kbps.f4v” system-bitrate=”700000″/>
<video src=”mp4:sample1_1000kbps.f4v” system-bitrate=”1000000″/>
<video src=”mp4:sample1_1500kbps.f4v” system-bitrate=”1500000″/>
</switch>
</body>
</smil>
In the preceding there are five files and bandwidth triggers (e.g. bitrate=”xxxxxx”). For this example I am going to use only three to keep things simple. The files that I am going to use were encoded with the Adobe Media Encoder that is included with Creative Suite 4. They were encoded using On2 VP6 using a constant bitrate. The names of the files are:
Redworkflow_300kbps.flv
Redworkflow_400kbps.flv
Redworkflow_500kbps.flv
Since these files are not F4V or MP4 files I will not need the “mp4:” prefix. The following is the edited version of the “dynamicStream.smil” file.
<smil>
<head>
<meta base=”rtmp://localhost/vod/” />
</head>
<body>
<switch>
<video src=”Redworkflow_300kbps.flv” system-bitrate=”300000″/>
<video src=”Redworkflow_400kbps.flv” system-bitrate=”400000″/>
<video src=”Redworkflow_500kbps.flv” system-bitrate=”500000″/>
</switch>
</body>
</smil>
You might have noticed that bitrate is in bits not kilobits. In other words 300000 is 300kbps (kilobits per second). Notice that I changed the bitrate attribute to reflect the data rate that the video file was encoded to using the “Adobe Media Encoder“.
The following is an example of what your finished project could look like using the sample Flash video player included with the installation of the Flash Media Server.
Well that should get you started. Drop me a line if you have success or problems.
<object width=’640′ height=’377′ id=’videoPlayer’ name=’videoPlayer’ type=’application/x-shockwave-flash’ classid=’clsid:d27cdb6e-ae6d-11cf-96b8-444553540000′ ><param name=’movie’ value=’swfs/videoPlayer.swf’ /> <param name=’quality’ value=’high’ /> <param name=’bgcolor’ value=’#000000′ /> <param name=’allowfullscreen’ value=’true’ /> <param name=’flashvars’ value= ‘&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&serverURL=&DS_Status=true&streamType=&autoStart=true’/><embed src=’swfs/videoPlayer.swf’ width=’640′ height=’377′ id=’videoPlayer’ quality=’high’ bgcolor=’#000000′ name=’videoPlayer’ allowfullscreen=’true’ pluginspage=’http://www.adobe.com/go/getflashplayer’ flashvars=’&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&serverURL=&DS_Status=true&streamType=&autoStart=true’ type=’application/x-shockwave-flash’> </embed></object>