Watch the video tutorial: Streaming video with xmoov/PHP How to set up xmoov to create a video player that can stream videos on an server without installing any streaming server software. Includes overview of video player built with Flex. [ Other video tutorials ]

It used to be that if you wanted to do video streaming you had to use Flash Media Server or that Red5 thing. The problem with that is first the cost and secondly you can’t just toss this stuff on your server and say go stream. But xmoov fixes all that, very simple to use and for the low, low, low, discount price of absolutely nothing.

What is streaming? ( skip to the next heading if you already know this stuff. )

In case your not familiar with video playback there are two methods of delivery: progressive and streaming. Playing a video progressively is much like downloading an image from a server. You don’t need any special software on the server. The downside to progressive is that users can’t seek to a portion of the video until it has been downloaded.

That isn’t a big problem if you have fairly short videos, like commercials or maybe a music video. But for long videos it can be an issue.

Streaming a video allows the user to jump to the very end of a video and watch that without downloading all the bits that came before.

Another difference between the two is that progressive videos end up on the user’s browser cache. With streaming you can keep it out of the cache which is important for videos that you don’t want users to redistribute – like movies.

You can read more about Flash video streaming at the Wikipedia.org.

Installing xmoov
xmoov is simple to install. How simple? Well, can you FTP? Cause that’s about all you need to do. Just drop one little file – xmoov.php – into the root of your server. One thing to look at is the opening PHP tag in the xmoov.php file. I’m just learning PHP and one thing I’ve noticed is that sometimes a block of PHP script begins with: <? and sometimes it begins with <?php. Apparently that’s a server setting or something. The developers for

xmoov must have their servers set up so that they don’t have to include the php part of the <?. But that script wouldn’t work at all on my development system here or on my host. If you are having trouble getting the code to work then just add the php to the <? and that might fix your problem, like it did for me.

How xmoov works
With progressive videos you would tell your video player to play a video. Again, it’s much the same as telling an <image> component in Flex what it’s source is. Here’s some Flex code as an example:

<mx:VideoDisplay
source="http://polygeek.com/videos/sea.flv"
width="320" height="240" />

With xoov it’s nearly the same. You need to tell the <VideoDisplay> component to play everything through the xmove.php script. All you would need to do is change the source to this:

source="{ videoFileName }"

Where videoFileName = “http://polygeek.com/xmoov.php?file=sea.flv&position=0″;

You can see that you’re passing the file and position to the xmoov. It’s pretty obvious what the file is. The position is the number of bits into the movie from where the script will start sending the file stream. In this case we’re starting at the beginning.

This is an ultra-important point: you can only stream from the file position of a key frame in the video. You can’t just make up a number of bits into the stream and expect it to work. So, the question is, where are the key frames?

Key frame, key frame, where art thou key frame?
Here’s what you do to get a key frame: you fake a hand off to the left and then run the QB on a bootleg to the right where he… Sorry, the game is on.

Okay, here’s what you do to find the key frames: you need some tool that can inspect your video files for key frames and then add the entire list to an Array in the metaData. It’s quick and simple to do. I used FLVMDI – download link is about 2/3rds of the page down – which has a command line and GUI version. Unfortunately I couldn’t get the GUI version to work but the command line worked like a charm.

The download page for FLVMDI has full documentation. Here are the parameters that I used for the command line version: flvmdi.exe C:\wamp\www\videos /x /k

What that will do is inject the key frames metaData into the file and also output an XML file with the same data. If you don’t want the XML file then leave off the /x parameter.

If you want to inspect the metaData then you can use RichFLV – a free AIR app – that will play videos and gives you a panel to display the metaData. In the case of the key frame metaData it will only show an [ object object ] for the value. But at least you know it’s there. Obviously you can just run your app in debug mode and set a break-point in the onMetaData event handler to inspect the values if you want – more on that later.

Seeking to a key frame
Now that we’ve gone through all this work you might want to actually set your video player up to seek. When the user seeks forward, or backward, in the video you need to know the time value in the movie that they are targeting – in seconds.

The metaData that FLVMDI has injected is two parallel arrays. The times array is a list of all the time values in the video that correspond to a key frame. You will need to loop through that array looking for the value that is nearest to where the user wants to seek. Once you have the index of the times array then you can use the corresponding element in the in the filepositions array – which is a collection of all the file positions that correspond to a key frame – to tell xmoov what part of the video file to start sending from.

The code in my onSeek() method looks like this:

private function onSeek( e:SliderEvent ):void {
var seekTo:Number = e.value;
var i:int = 0;
while( _keyFrame_timePositions[i] < seekTo ) {
i++
}
vidWin.source = "http://polygeek.com/xmoov.php?file=?sea.flv&position=" + _keyFrame_filePositions[i];
}

Settings in the xmoov.php file

There are only two settings that you must change from the defaults of the xmoov.php file. When you download it find lines 33 and 36. By default they look like this:

define('XMOOV_PATH_ROOT', '' );
define('XMOOV_PATH_FILES', 'videos/' );

If you are testing on a local machine you can set the first line to something like ‘C:\wamp\www\’. On my server I used: $_SERVER['DOCUMENT_ROOT']

The second line is just the folder on your server where the videos are located. That’s all the changes that you need to make to xmoov.php. There are other settings for bandwidth limiting and caching that you can read more about in the documentation – if you can find it.

So in the end my file looks like this:

define('XMOOV_PATH_ROOT', $_SERVER['DOCUMENT_ROOT'] );
define('XMOOV_PATH_FILES', '/videos/' );

Issues
Originally when I used FLVMDI to inject metaData I added the parameter to add an event for when the last second of video is played. For some reason that caused the <VideoDisplay> to bounce at the end of playback back a second or so. So if you don’t need to know when the last second of video plays then I’d leave that off.

You can see in the source of the example that I had to do some trickery to keep the timeline-thumb ( that the user drags to do the seeking ) from bouncing after a seek.

Closing
That pretty much covers it. The source code in my example is extensively commented so give it a looksy.

Please let me know if you have any questions or comments on how this could be improved.