• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

How to show video frames as still preview image when roll over on seek bar just like Hulu?

Participant ,
Aug 04, 2010 Aug 04, 2010

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

Video_Frames_Hulu.png

Thanks & regards

Sunil Kumar

Views

7.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Participant , Oct 01, 2014 Oct 01, 2014

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

...

Votes

Translate

Translate
Guest
Aug 04, 2010 Aug 04, 2010

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Aug 04, 2010 Aug 04, 2010

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Aug 05, 2010 Aug 05, 2010

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Aug 05, 2010 Aug 05, 2010

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 07, 2011 Feb 07, 2011

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 10, 2011 Feb 10, 2011

Copy link to clipboard

Copied

We used separate stream of low quality also to get frames previews.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 21, 2013 May 21, 2013

Copy link to clipboard

Copied

I need image of every frame of video. can you please share the solution??

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 03, 2014 Jul 03, 2014

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,

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 01, 2014 Oct 01, 2014

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 01, 2014 Oct 01, 2014

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 01, 2014 Oct 01, 2014

Copy link to clipboard

Copied

LATEST

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines