How many times have you seen a flash video player where you could click on the seekbar and the video would automatically jump to that position, exactly like with Windows Media Player or WinAmp? To be honest, I’ve only seen 1 till now.
Since of my jobs at the company I work for is also to create flash apps and videoplayers, I’ve decided to take a closer look at how that task can be accomplished, and it wans’t that hard to be honest, I’m actually wondering why anyone is using it.
Let’s start directly off with opening Flash 8 or CS3 and create a new document (size doesn’t actually matter)
1. Drag an instance of the FLVPlayback component to the stage, and assign a unique name of “videoHolder”
To start off we need a few lines of code, sure you could also put everything in the parameters panel of the component, but I prefer this method, though one thing needs to be changed in the parameters, search for the “Skin” parameter and set skin to NONE.
3. Jump right over to your actionscript panel by pressing F9 on your keyboard and star typing or just copy & paste the code below
1 2 3 4 | videoHolder.contentPath="rtmp://..."; videoHolder.playPauseButton = my_playPauseButton; videoHolder.stopButton = my_stopButton; videoHolder.seekBar = my_seekBar; |
Line1: Define the location of your media file
Line2: Define the instance that controls the playPause function
Line3: Define the instance that controls the stop function
Line4: Define the instance that acts as a seek bar
Ok right now we have a video player that’s working pretty well, but now you want to add that special functionality for that we need to write these few lines of code:
1 2 3 4 5 | function clickTime(){ videoDuration = videoHolder.metadata.duration / my_seekBar._width; clickPos= videoDuration * my_seekBar._xmouse; videoHolder.seekSeconds(clickPos); } |
Line1: our function
Line2: videoDuration is the result of the duration of your FLV divided by the width of you seekbar.
Line3: clickPos is the result of the multiplication of the videoDuration with the X position of the mouse when clicked
Line4: Seeks the flv to the desired location defined by the variable clickPos defined on the previous line
Last but not least we need to either create a listener on the seekbar or create a function directly on the movieclip, since my original code is already over 400 lines (yeh I have a lot more of things going on then only this 
) I’ve decided to place it on the movieclip by simply adding
1 2 3 | on(release){ clickTime(); } |
Do a test run by pressing CTRL+Enter and you’re done 
Believe me or not, this was really simple, and you have a nice functionality where people think it’s really useful, you just need to be aware of one thing when using it.
a) In case you don’t have a flash streaming server like FMS, Red5 or Wowza you’ll not be able to jump to a certain position while the flv is being progressive downloaded. Though this is something that I’m not able to test since my environment is completely flash streaming friendly.
I hope you guys enjoyed reading a new tutorial.
Tiago
How we can use multiple videos playback with this FLVplayback component using flash 8
Hi,
I have checked the code and its not working properly.
issue is with FLVPlayback component. When i click to particular second of movie its not pausing movie to that particular second. For example i clicked on the bar and got the second 3 but playhead stops me at 4.
Any idea??
Thanks
This is the code i am using for seeking particular second. After seeking payhead time and seeking time are different.
Media.contentPath = “myfile.flv”;
TimeBar_mc.onPress = function() {
clickTime(this);
};
function clickTime(my_seekBar) {
videoDuration = Media.metadata.duration/my_seekBar._width;
clickPos = videoDuration*my_seekBar._xmouse;
trace(clickPos);
Media.seekSeconds(clickPos);
Media.pause();
}
var myListener:Object = new Object();
myListener.playheadUpdate = function(eventObj) {
// Insert your code here.
newTimeSec = Number(eventObj.target.playheadTime);
trace(“playheadUpdate : “+newTimeSec);
//
};
Media.addEventListener(“playheadUpdate”, myListener);
The flvplayback AS2 component will only scrub to video keyframes. If you have your keyframes set low the playhead will not go exactly where you click
A few things:
1. Claiming you can’t test non-streaming video is a bit inaccurate, since all you need is an .flv file deployed to a non-FMS server. Please try to make a deployed .flv file seek accurately, and you’ll begin to understand why even YouTube has problems with this.
2. This method doesn’t work for anything BUT a FMS-capable server, as normal progressive seeking is based on keyframes, as luxveritas says above. That is actually why you don’t see accurate seeking in most Flash video applications. If everybody used FMS-capable servers, we’d all have accurate video scrubbing and tracking, because otherwise we have to (as pure .flv deployers) balance video size against seek accuracy.
his is the code i am using for seeking particular second. After seeking payhead time and seeking time are different.
a nice post i really feel pleasure to read it because my Flv version is not updated thanks for sharing