Copy link to clipboard
Copied
Hi,
I just want to show current video frames when mouse roll over on seek bar just like Hulu video player. For reference please see below attached snap shot of Hulu video player.
Can you please tell me how can I do this, I am using Flash Media Server content as well as HTTP server content in my video player and using Action Script 3.0
Thanks & regards
Sunil Kumar
Please find below code for both Option 1 & Option 2.
Please note -
1) Use your actual variable instead of dummy.
2) Position of thumbnails should be move as per mouseMove on seekBar. Get the mouse X posion and set the xpos of your thumbnail which contain either Video object or image display holder.
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import org.osmf.events.TimeEvent;
import flash.utils.Timer;
import flash.net.NetStream;
p
...Copy link to clipboard
Copied
Hi Sunil,
Please see if these are helpful,
http://www.thetechlabs.com/tutorials/audionvideo/how-to-build-a-as3-videoplayer/
http://www.thetechlabs.com/tutorials/xml/create-a-as3-slideshow-with-xml/
Regards
Mamata
Copy link to clipboard
Copied
Dear Mamta,
Thanks for your response but this not what I am looking for. I have developed Flash video player using OOP in AS3 and I also know how to develop flash xml gallery in AS3.
My query is how to show preview image of particular video when I do roll over on seek bar. Please follow the following example. Please see it in attached snap shot image of Hulu video player.
e.x
Suppose I have a video player with 400 x 300 (Width x Height) and my seek bar width is equal to my player width. Now when I do roll over on seek bar, i can get current seek time of video on particular point where I have put my mouse over, I just want to load and image of that seek time video frames.
I hope you got my point. Please suggest me any tutorial of help file so that I can do it.
Thanks & regards
Sunil Kumar
Copy link to clipboard
Copied
Hi Sunil,
When you roll over basically you can use another netstream to play same file with start position equal to seek time and playtime equal to 1 i.e. ns.play("filename",seekTime_rollover,1,true);
Same time you can use small video component which you can make visible or invisible when you roll over seek bar.
I know this might not be best way of doing it - as it might cause of lot extra play events but as of now that's what which comes to my mind on the fly.
Will try to think for better solution if i get time.
Copy link to clipboard
Copied
I know this way I can do it but this is not permanent solution. I want to use image and I can use even server side script if required. Please tell me any best solution which Hulu does as I shown attached snap shot of Hulu video player.
Waiting for expected solution.
Thanks & regards
Sunil Kumar
Copy link to clipboard
Copied
Hi,
I have figure out how to do this. If any one want to know please feel free to contact me.
Best
-- Sunil Kumar
Email: sunilstg@gmail.com
Copy link to clipboard
Copied
We used separate stream of low quality also to get frames previews.
Copy link to clipboard
Copied
I need image of every frame of video. can you please share the solution??
Copy link to clipboard
Copied
Sure I will help you. Please find below details how to integrate.
a) Option 1:
Create another video player thumbnail size using NetStream/OSMF Player just above the seekbar display the video frames on over event on on seekbar and pass the arguments current time of seek point where you want to show the video frames image. After receiving params inside the player seek video to that frames and once you receive display of video stop the video and close all events. Now here you have two option either you leave it as it is video in stopped mode or take a snapshot using bitmap and add bitmap as image there in place of video object and then clear the video place holder. For this type of methods, always use low bitrate file so that it can work on low bandwidth areas also.
If you can develop the code then good or send me email I will give you code on your email id.
b) Option 2:
Generally you will get one complete shot of image as thumbnail format of the video and time duration sheet. i.e. 1280x720 jpg image file with fully cover of small thumbnails approximately 100x100 image size covered whole image with different images of movies. Video Encoder person will give you video frames as still preview image in one sheet. Now you have to trace all thumbnails image using bitmap tracer and save it as jpg file or store that bitmap into array object and use on the base of current video time. The main difference between option 1 and option 2 is in first option you are using netstream/osmf object to display frames as video and in second option you are using bitmap tracer to trace the bitmap image and display it as still preview image.
Now you can use any option depends upon your requirements and available assets.
If still you feel any issue please don't hesitate to contact me on my email id: sunilstg@gmail.com.
Best regards,
Copy link to clipboard
Copied
As I am also building a web player, I came across your post. Your solution sounds great
and I was hoping to also receive see a copy of you solution. I understand what you're saying
in your last post but there is nothing like seeing the final code.
Thanks in advance Sunil.
Copy link to clipboard
Copied
Please find below code for both Option 1 & Option 2.
Please note -
1) Use your actual variable instead of dummy.
2) Position of thumbnails should be move as per mouseMove on seekBar. Get the mouse X posion and set the xpos of your thumbnail which contain either Video object or image display holder.
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import org.osmf.events.TimeEvent;
import flash.utils.Timer;
import flash.net.NetStream;
public class SeekThumb extends MovieClip {
private var seekBtn:MovieClip;
private var getVideoFrameAtSecond:Number = -1;
private var durationOfVideo:Number = 100// Asume that we have 100 seconds video
private var timer:Timer;
private var counter:Number = 0;
private var delay:Number = 1; // It can be updated as per smoothness.
private var netStream:NetStream;
private var lastSeekPos:Number;
public function SeekThumb() {
// constructor code
this.addChild(createSeekButton());
timer = new Timer(200);
timer.addEventListener(TimerEvent.TIMER, updateQos);
counter = delay;
}
private function createSeekButton():MovieClip{
seekBtn = new SeekButton();
seekBtn.buttonMode = true;
seekBtn.addEventListener(MouseEvent.MOUSE_MOVE, seekMouseMove, false, 0, true);
seekBtn.addEventListener(MouseEvent.ROLL_OVER, seekOver, false, 0, true);
seekBtn.addEventListener(MouseEvent.ROLL_OUT, seekOut, false, 0, true);
seekBtn.x = 50;
seekBtn.y = 100;
return seekBtn;
}
private function seekOver(event:MouseEvent):void{
timer.start();
}
private function seekOut(event:MouseEvent):void{
timer.stop();
}
private function updateQos(event:TimerEvent):void{
//trace("counter = "+counter)
if(counter>0){
counter--;
}else{
// Enable below funtion as per your need.
//updateVideoFrame(getVideoFrameAtSecond);
//addImageOfVideoFramesAt(getVideoFrameAtSecond);// If you want to show your bitmap image then pass the bitmap image params here or customize your methods here
trace(getVideoFrameAtSecond);
}
}
private function addImageOfVideoFramesAt(seekTime:Number):void{
var getBitmapMovie:MovieClip = myStoredThumbArray[seekTime]// Set the image url here from array which you have already stored/ traced from main source of image which you provided.
previewHolder.addChild(getBitmapMovie);
}
private function updateVideoFrame(setId:Number):void {
try {
if (netStream!=null && lastSeekPos!=setId) {
lastSeekPos = setId;
netStream.play(netStreamURL, setId);
netStream.pause();
//netStream.soundTransform = setVoluem to 0
}
} catch (error:Error) {
trace("UpdateVideo Frame Error: "+error);
}
}
private function seekMouseMove(event:MouseEvent):void{
var currentMc:MovieClip = MovieClip(event.currentTarget);
getVideoFrameAtSecond = Math.round(currentMc.mouseX*durationOfVideo/seekBtn.width);
counter = delay;
}
}
}
If still you have any issue don't hesitate to contact
Copy link to clipboard
Copied
EXELLENT!!! This is the correct answer.
see more of my question @ I'm trying to find code that has a seek bar roll over effect as HULU and YouTube.
Thanks Sunil!