2 Replies Latest reply on Aug 9, 2009 9:48 PM by Sreelash

    Implementing a seek bar for video player

    Sreelash Level 1

      Hi,

       

           Can anybody help me to implement a seek bar for a video player. I know some basics about that. If possible send me any tutorials for that.

       

      Thanks and Regards,

                               Sreelash

        • 1. Re: Implementing a seek bar for video player
          k.bitgood

          I have recently done this exact thing! I will try to write you a mini tutorial.

           

          First you want to create an instance of the FLVPlayback on your stage.

          (If the FLVPlayback is not what you had in mind when you said video player, don't worry all this code is usable on a movie clip or  the _root level. Details for this conversion are at the bottom of the post.)

          • Open the components window by Window > Components.
          • Drag FLVPlayback onto your stage.
          • Then open the component inspecter by Window > Component Inspector.
          • With your FLVPlayback instance selected you will see its parameters.
          • Enter the path to your external flv file beside content path.
          • Change some other parameters if you wish, but don't add a skin that would defete the purpose of your own scrubber.
          • Open the properties inspecter Window > Properties and with your FLVPlayback instance selcted enter the instance name my_video.

          Then create a button and inside of it place a rectange the desired size and shape of your seek bar.

          • With the button selected enter the instance name bar_btn.
          • Place this button somewhere underneath your FLVPlayback.

          Then lastly create a movie clip and inside of it place the desired size and shape of your scrubber

          (a scrubber is the little thing that you click on and move and seek through the video)

          • With the movie clip selected enter the instance name scrubber_mc.
          • Place this movie clip somwhere on your seek bar button.

           

          Then select frame 1 in your timeline and in the actions panel Window > Actions enter this code:

          (There are line by line comments to explain what the code is doing)

          //scrubber_mc = instance name of a movie clip used to scrub the video
          //     (needs to be a movie clip and not a button to enable the onEnterFrame method)
          //bar_btn = instance name of the bar that the scrubber movie clip will move along
          //my_video = instance name of the FLVPlayback component on stage
          
          
          //this is the function you will call to make your scrubber move
          function scrubberMove() {
            //when you call the scrubberMove function the following will repeat every frame until you delete the function
            scrubber_mc.onEnterFrame = function() {
              scrubber_mc._x = Math.round(bar_btn._x+((my_video.playheadPercentage/100)*bar_btn._width));
              //this math calculation is relative to the size and position of the bar_btn so you can move those around on the stage without breaking the code
            };
          }
          //now call your function
          scrubberMove();
          
          //now that you have the scrubber moving you need to allow the user to control it
          
          //the function in controlling it happens when the user presses the scrubber_mc
          scrubber_mc.onPress = function() {
            startDrag(this, false, bar_btn._x+1, this._y, (bar_btn._x+bar_btn._width), this._y);
            //this allows the user to drag the bar on the x axis for the width of the bar_btn
            delete this.onEnterFrame;
            //this stops the above function and it is neccessary to stop the scrubber from moving out from under the user's mouse
          };
          
          //this function happens when the user releases their mouse and it doesn't matter if the cursor are still over the scrubber_mc
          scrubber_mc.onRelease = scrubber_mc.onReleaseOutside = function () {
            this.stopDrag();
            //stops the dragging of the scrubber_mc
            scrubberMove();
            //starts the scrubber_mc moving again
            my_video.seekPercent(((this._x-bar_btn._x)/bar_btn._width)*100);
            //seeks the FLVPlayback component to the correct percent of the video based on where your scrubber_mc is relative to you bar_btn
          };
          

           

          Now you have a seek bar that moves along with your video and you can move it to select a different part of your video.

           

          There also some other additions that you can add.

          If you would liketo be able to click anywhere on your bar_btn and have your video move to that position add this function:

           

          bar_btn.onPress = function() {
            my_video.seekPercent(Math.round(((_xmouse-bar_btn._x)/bar_btn._width)*100));
            //this finds the stop on your bar that you clicked based on _xmouse and moves your movie to it
          };
          

           

          If you would like the video to scan through while you are dragging add this code to your scrubber_btn.onPress function

           

          scrubber_mc.onPress = function() {
            startDrag(this, false, bar_btn._x+1, this._y, (bar_btn._x+bar_btn._width), this._y);
            delete this.onEnterFrame;
          
            scrubber_btn.onEnterFrame = function(){
            //we can add this function again and it wont conflict because you deleted the other onEnterFrame function
              my_video.seekPercent(((this._x-bar_btn._x)/bar_btn._width)*100);
              //this is the same code that found the position in your onRelease function
            };
          };
          

           

          If you would like your scrubber to control a movie clip and not an instance of the FLVPlayback component then use this code:

           

          //my_mc = instance name of the movie clip
          //the conversion here is simple: replace my_video with my_mc and change the way you find the percent and the way you seek to a spot
          //     (replace my_mc with _root if you want your scrubber to control your entire swf)
          
          
          function scrubberMove() {
            scrubber_mc.onEnterFrame = function() {
              scrubber_mc._x = Math.round(bar_btn._x+((my_mc._currentframe/my_mc._totalframes)*bar_btn._width));
            };
          }
          
          scrubberMove();
          
          scrubber_mc.onPress = function() {
            startDrag(this, false, bar_btn._x+1, this._y, (bar_btn._x+bar_btn._width), this._y);
            delete this.onEnterFrame;
            scrubber_mc.onEnterFrame = function() {
              my_mc.gotoAndStop(((this._x-bar_btn._x)/bar_btn._width)*100);
            };
          };
          
          scrubber_mc.onRelease = scrubber_mc.onReleaseOutside = function () {
            this.stopDrag();
            scrubberMove();
            my_mc.gotoAndStop(((this._x-bar_btn._x)/bar_btn._width)*100);
          };
          
          bar_btn.onPress = function() {
            my_mc.gotoAndStop(Math.round(((_xmouse-bar_btn._x)/bar_btn._width)*100));
          };
          

           

           

           

           

          This is all my code that I wrote from scratch and this is my tutorial ever. I appreciate any and all feedback. Some of this code has not been tested so also let me know if you have problems and I will see if I made any mistakes.

          • 2. Re: Implementing a seek bar for video player
            Sreelash Level 1

            Hi Kibbik, thank you very much for ur helpful mind. Anyways I will let you know after implementing the scrubber. I had already implemented. But some times some issues occur. Hope your tutorial will be helpful. Once again thank you very much.

             

            Thanks and regards,

                                      Sreelash