Very Simple Video Player

Overview

The Flex Framework and Red5 make it very easy to make a video player system with trivial client and server application code. In fact, the code to do so can easily fit on a single page. In this article we'll explore just how to do so with Flex 3 and Red5 0.8.

Prerequisites

• A Red5 Development Environment

Notes

It's important to note that this example oversimplifies things; in real world scenarios we'll likely want to use something a little (or a lot) more complex for enhanced functionality.

Its recommended that you follow the instructions below and create your own projects. However, if you require it, the client application code is available via anonymous SVN from google code from the repository location http://tcp1935.googlecode.com/svn/ in the examples/VerySimpleVideoPlayer subdirectory.

Server Application

1. Follow the directions in the article Developing Your First Red5 Application to generate a Red5 server application. The resulting server will actually be a completely functional server application, so you're already done with all the code that is needed on the server.
2. We do need to configure our server with a sample video to play. To provide you with a sample, I pulled the mp4 version of the TBBS episode of a collection called BBS Documentaries. I then used a flv and mp4 enabled build of ffmpeg to reencode it as flv video:
   ffmpeg -t 60 -i 1993-bbs-tbbstape_512kb.mp4 -ar 22050 test-bbs.flv
   
   The video is available via anonymous svn from google code here:
   http://code.google.com/p/tcp1935/source/browse/#svn/examples/assets/video
   
   The video is shared under a Creative Commons license from archive.org, so consider the sample under the same license.
   
   
3. We have to make this video available to our Red5 server application. To do so, go to your server project (SimpleRed5Project, if you are following the previous example) in Eclipse. In the WebContent folder, create a new directory named streams. It is from this default location that the Red5 ApplicationAdapter will search for content requested by client connections.
   
4. Copy and paste the test-bbs.flv file into the streams directory.
5. Start your Red5 Server Runtime, which should be configured to run your Red5 server application. Your server application should then automatically republish and include the flv file in the deployment.
   
6. That's it! You should now have a functioning sample server application that can stream a video, having written no code of your own and just doing some basic configuration.
   

Client Application

1. In Eclipse, switch to the Flex Development Perspective.
2. In the Flex Navigator view, right click and choose New -> Flex Project
3. For a project name, use VerySimpleVideoPlayer, and then click Finish.
4. In the project, open the file VerySimpleVideoPlayer.mxml
5. Replace the default source with the following:
   
   

   <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:VideoDisplay source="rtmp://localhost/SimpleRed5Project/test-bbs.flv" width="320" height="240" id="_video" /> <mx:Button label="Play" click="_video.play()" /> <mx:Button label="Stop" click="_video.stop()" /> </mx:Application>

   
   
6. That's all there is to it. Save the file, and we're ready to give it a test.

Testing Your Work

1. Launch your client application by right clicking on the project and choosing Debug As -> Flex Application.
2. Your browser should launch and show the video application we just developed. After clicking the play button, the video should beginning playing after a very slight delay. The output should then look like this:
   
3. If you see the video playback correctly, then everything worked perfectly. Great! You've just created a (very) simple video playback system with your own Red5 streaming media server on one side and a Flex client on the other.