view source
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:VideoDisplaysource="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.
0 comments:
Post a Comment