11 Replies Latest reply: Oct 1, 2014 7:39 AM by tjrashad RSS

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

    Sunil Kumar Sah Community Member

      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

        • 2. Re: How to show video frames as still preview image when roll over on seek bar just like Hulu?
          Sunil Kumar Sah Community Member

          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

          • 3. Re: How to show video frames as still preview image when roll over on seek bar just like Hulu?
            SE_0208 Adobe Employee

            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.

            • 4. Re: How to show video frames as still preview image when roll over on seek bar just like Hulu?
              Sunil Kumar Sah Community Member

              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

              • 5. Re: How to show video frames as still preview image when roll over on seek bar just like Hulu?
                Sunil Kumar Sah Community Member

                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

                • 6. Re: How to show video frames as still preview image when roll over on seek bar just like Hulu?
                  DenisBulichenko

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

                  • 7. Re: How to show video frames as still preview image when roll over on seek bar just like Hulu?
                    Flowinlife

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

                    • 8. Re: How to show video frames as still preview image when roll over on seek bar just like Hulu?
                      Sunil Kumar Sah Community Member

                      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,

                      • 9. Re: How to show video frames as still preview image when roll over on seek bar just like Hulu?
                        tjrashad Community Member

                        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.

                        • 10. Re: How to show video frames as still preview image when roll over on seek bar just like Hulu?
                          Sunil Kumar Sah Community Member

                          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