Using the Flash Media Server Sample Video Play

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.

start screen

start screen

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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&#8217; 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.

Example Using Sample Video Player

Example Using Sample Video Player

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&#8217; flashvars=’&videoWidth=0&videoHeight=0&dsControl=manual&dsSensitivity=100&serverURL=&DS_Status=true&streamType=&autoStart=true’ type=’application/x-shockwave-flash’> </embed></object>
About these ads

39 Responses to Using the Flash Media Server Sample Video Play

  1. Daniel A says:

    Hi!

    I have a question. What if I’m doing live streaming?, I mean I don’t have single mp4 or f4v files, I only have a live stream, how can I do multistreaming with this video player? can I use a smil file too?

    Thanks in advance!

    • nhippe says:

      Hello Daniel, you would still use a smil file for the live streams. You would set the following streamType=vod to streamType=live in the object and embed code. In the Live Media Encoder you would add a variable to the stream name (e.g. livestream%i). As an example if you had two streams set at 100kbps and 200kpbs coming out of the live media encoder you would have the following in the smil file:

  2. Dave says:

    Is there a way to incorporate a continuous playlist into the player?

  3. George Q says:

    Hello,

    If I resize to 443×278 the player does not resize correctly…suggestions?

    Where can I find information about some of the embed variables
    dsControl ?
    dsSensitivity ?
    DS_Status ?
    streamType ?

    Thanks…

    • nhippe says:

      Hello George, I would assume that this is either an issue with how the sample player was written or that the size does not match the actual size of the video. I would try creating a blank html page pasting the object and embed code into the blank page. Play the video to see what size the player runs at then change the size of the player to the size mentioned.

      I have to say that the reason that I wrote this article was that I was not able to find a lot of information about those properties. I was able to find out that dsSensitivity is not enabled. dsControl set to manual allows the viewer to request a higher or lower stream via the controls (+ and – ) in the player skin. I prefer to set this to auto to let the player switch based on the bandwidth,etc of the viewer. The streamType is either vod for a file or live for a live stream. I am not sure of DS_Status.

      • Darren says:

        Thanks for the great info. I am trying to incorporate some videos on my company’s web site and decided to use the sample player since it is pretty easy to use.

        I am having the same problem that George is, when I attempt to resize the video. The player doesn’t not resize to fit the video dimensions. Can you describe how to resize this sample player?

      • nhippe says:

        My article about using the sample player should get you started.

  4. Jeremy Smith says:

    Hi Nick
    Thanks a bunch for all the info. This has really helped me get our player up and running as well as embedding it into a multitude of applications.

    I’ve run into a major problem tho and am at a loss tracking it down. We’re running FMS 3.5 and in this instance we’re again using the sample player. Works like a charm however when our instructor is training and pauses the stream for longer than just a few minutes the entire stream croaks/plays double/gets stuck in a buffering loop. Any other flash player tho we don’t encounter the problem. So it seems we’ve tracked it down to something with this player.

    This may not be the best venue to ask this question but I thought I might start here at least. I love the player and the ease of use but it’s becoming a real pain in the above situation.

    Thanks a ton for any suggestions!

    Jeremy

  5. Wow! You know what you are talking about!!!

  6. Hello Chris says:

    Chris,

    I installed FMS on my dedicated host server. It’s running windows 2000. I have no idea how to view my videos across the net. I read your tutorial and mnyt others by adobe but it says nothing about running two servers (with hosted sites) and how to play the videos off the C/ drive. can you help?

    • nhippe says:

      All you have to do is follow my post about using the sample player. If you are looking for an easier way to see if the server is running you should be able to simply go to localhost in the browser on the system that it is installed on to see the start page. If you want to test other content look at the installation folder for FMS you will see a samples folder and in that folder is a videoPlayer folder. Open that folder and then open “videoplayer.html” This html page gives you the ability to test other content. There are directions on the page. Some of this is covered in my article about using the sample player.

  7. Ben says:

    Hi,

    I have FSM 3.5 setup and a live feed is being sent to it from digital rapids appliance. I can see the live feed when using the ‘interactive tab’ sample on the FMS 3.5 page (Server is rtmp://serverIP/live and stream is ‘livestream’).

    I cannot for the life of me figure out how to stream a live feed to sample player (i.e. ‘samples tab’ rtmp video player).

    Any help would be appreciated!

    • nhippe says:

      If the digital rapids appliance is pushing out multiple streams and you want to use dynamic streaming you will want to use a smil file. In the smil file the is the application. That means that it is the server address (IP) and the folder in the applications directory of the installation folder (e.g. C:\Program Files\Adobe\Flash Media Server 3.5\applications). If you open the applications folder you will notice two folders vod and live. If you are publishing from the digital rapids to the vod folder the meta base would look something like the previous. Next you specify the streams that are being published from the digital rapids appliance with the stream names of live1, live2 and live3. For instance if you are publishing 3 streams you might have something like the following:

      video src=”live1″ system-bitrate=”200000″
      video src=”live2″ system-bitrate=”350000″
      video src=”live3″ system-bitrate=”450000″

      The bitrate is in bits not kilobits. Next you put the smil file in the same folder as the swf that is the sample player and tell the swf (i.e. videoPlayer.swf) that you want to use the smil file as the source in the object and embed tag in the html page. This is documented in my article about using the sample video player on this blog. Do not forget to change streamType to live (e.g. streamType=live). Hope that helps.

      • Ben says:

        I appreciate the prompt response, however my problem is much simpler than that. Not really related to smil files or multiple streams at all.

        I just want to use the flash video player that comes with FSM (the one that shows the train video by default) to stream me own live feed.

        Maybe you’ve already answered that in your original documentation, but I’m missing something. The player code that I’ve nabbed and modified from FSM sample page just shows ‘stream not found’.

  8. Tomek says:

    Hello,
    I have a little problem with FMS. After installation I can’t run any sample video, always get the message:
    “Forbidden
    You don’t have permission to access /vod/mp4:sample2_1000kbps.f4v on this server.”

    I have done everything like in your guide. Typical install FMS with Apache without reconfiguration.
    Could you give me some clue what I did wrong?
    Thanks for replay !
    Tomek

    • nhippe says:

      The first thing that you should do is open a browser on the system that you installed FMS on and go to localhost. It maybe that you have another http server running on the same server. The second thing that I would check is to see if you are logged on as admin as that might be the reason that you have a permission problem. Lastly I would check to make sure that the files are not read only.

  9. deepak says:

    as ben says, i too unable to understand how to play the livestreaming to the sample default video player.

    As you explained above is only you worked with the vod(prerecorded data) . But can you explain in detail, how to livefeed(live) to the default sample video player.

    Waiting for ur reply!

  10. deepak says:

    great.. thanks for the reply master. Now i can able to live stream using the default flash video player.

    Now my question is i want to use the buffer concept inorder to prevent the video from bandwidth problems..

    This default flash video player has the capacity to buffer for 4 seconds of video by default as i tested approximately.

    I need to increase the time delay time to 10 sec of the live streaming by increasing the buffer length….. if yes how can we configure the buffer length.

    Please provide us a new topic related with the buffer concept if u have any problem.

  11. Tim says:

    Hi, Is there any way we can change the red and grey skin/controls on the video player (videoPlayer.swf)that ships with FMS 3.5? Or is there an .fla available to edit and customise the look and feel further? Been scratching my head for too long trying to change this or find code that I can edit myself. Any help with be gratefull :-) Thanks Tim

    • nhippe says:

      Hello Tim, the only way to change the skin of the sample player that I know of would be to use the source in the same directory as the sample player. The source is in the form of a Flex project. This maybe as simple as a recompile after changing the css in the embedStyle.css file depending on the changes you want to make.

      • Tim says:

        Hi nhippe,

        Thanks for your advice. I have downloaded the Flex SDK and tried dragging the videoPlayer.mxml file onto the mxmlc.exe file to compile but I keep getting an error – override public function play2(param:NetStreamPlayOptions):void – I have found a partial discussion regarding this on the Adobe site, but no conclusion on fixing it. Once the error comes up, the command window closes and that’s it. Have you seen this before? Thanks Tim

      • nhippe says:

        I hate to say it but I have not run into that error. The problem maybe that I am using Flex Builder. I will reimport the Flex project and see if I get the error this evening.

  12. deepak says:

    thanks master…..

  13. Brian says:

    Hi Nick

    I am presently running FMS on a dedicated windows box using 2Is as a web server. I have enabled Apache in FMS and I’m getting problems playing http files. Can I simply turn off 2Is and see what happens. Will I run into DNS and IP address problems with the server?

    Thanks for your help

    • nhippe says:

      This is a common problem. You need to make sure that there are not conflict between apache that is installed with FMS and IIS. The easiest way to do this is to simply use one or the other. The benefit of using apache that is installed with FMS is that you have all of the resources that are installed with FMS at your finger tips. Just direct your browser to localhost or the IP address of the server and you will see the FMS start page. You can change the configuration for apache to run on a different port but I would suggest that you run FMS on a dedicated server anyway.

  14. You’ve done it again. Great post!

  15. Rush says:

    Hi,

    I am testing Flash Media Playback and try to play the following file below.

    I have FTP 2.avi to my web server as the path below.

    http://www.creativerush.com.au/2.avi

    and when I embed the code below

    http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf

    I got an error message saying “We are unable to connect to content you`ve requested”

    Could u tell me where did i went wrong with this?
    Thank You n looking forward for your response,

    Regards,

    Rush

  16. David Yun says:

    Is there an issue with setBufferLength when used with Live streams? we are setting it to about 3 seconds, but it keeps growing infinitely to the point that some live viewers are well over 2 minutes behind live which is not a great experience.

    • nhippe says:

      This could be an issue with the way that you setup the encoder. Make sure that the encoder is setup to only buffer the amount of time you require.

  17. nhippe says:

    Hello Carlos,

    It is not possible to reskin the sample player. It is possible to use an existing player if you want to reskin. You would need to use Flex or Flash.

    Nick

  18. deepak says:

    as ben says, i too unable to understand how to play the livestreaming to the sample default flash video player.

    As you explained above is only you worked with the vod(prerecorded data). But can you explain in detail, how to livefeed(live) to the default sample video player.

    and also i want to know how can we play the live stream of fms to the vlc player over Internet.. Is it possible?

    Am waiting for ur reply!!!

  19. deepak says:

    great.. thanks for the reply master. Now i can able to live stream using the default flash video player.

    Now my question is i want to use the buffer concept inorder to prevent the video from bandwidth problems..

    This default flash video player has the capacity to buffer for 4 seconds of video by default as i tested approximately.

    I need to increase the time delay time to 10 sec of the live streaming by increasing the buffer length….. if yes how can we configure the buffer length.

    Please provide us a new topic related with the buffer concept if u have any problem.

  20. nhippe says:

    the swf is a required element to streaming video. Video files are in a number of formats (.flv,f4v,mp4) the swf is what allows you to connect with the FMS server select and play the video.

  21. nhippe says:

    Hello, the source is included with the sample player. It is in the form of a Flex project. You can use this source to make any changes that fit your use case.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: