4 Replies Latest reply on Sep 25, 2009 4:51 AM by RossRitchey

    How to create a youtube style video player?

    anelia_a

      How to create a youtube style video player?

       

      starting with  flv1 playing

      when it finishes we have buttons to go to 2 other  flv files

      clicking a button plays flv2 or flv3 in the same player

      when flv2/flv3 finishes we see another button

      if we click this button we replay the whole thing (so playing flv1)

       

      this whole thing in one video player like youtube

       

       

      Does anyone know how to do this and can help me? or link to a good tutorial? or any tips? ideas?

       

      Many many thanks

       

       

      A.

        • 1. Re: How to create a youtube style video player?
          RossRitchey Level 4

          Take a look at the Open Video Player project.

           

          http://www.openvideoplayer.com/

           

          They are building a standardized way of doing all of those things, and more.

          • 2. Re: How to create a youtube style video player?
            bimgirl1

            I know it can be done using a (gasp) iFrame if anyone uses those anymore. I think there is a tutorial on YouTube but I am not sure.

            Good luck.

            • 3. Re: How to create a youtube style video player?
              anelia_a Level 1

              Thank you guys,

               

              I looked and do a deep research but still ... these players are not youtube style...:(

               

              I need to catch the 'stop flv' action, then display buttons which on clicks would 'call' other flv, which also needs to have 'stop flv' actions, again buttons, etc.

               

              Do you have other ideas? links? tutorials?

               

              Many thanks,

               

               

               

              A.

              • 4. Re: How to create a youtube style video player?
                RossRitchey Level 4

                VideoEvent.COMPLETE is the event that is fired in Actionscript 3 when the video finishes playing.  By listening for this you can tell when to display the buttons.

                 

                Displaying the next video is simply a matter of hiding the buttons and changing the source for the FLVPlayback component.

                 

                Here is a very simple implementation of the code for what you are looking for.  This assumes that there is an FLVPlayback component with the instance name "myVideo" and a MovieClip on the stage with the instance name "myMenu" - myMenu is assumed to have 2 buttons inside it, with the instance names "button_0" and "button_1" respectively

                 

                var vidPaths:Array = new Array();
                vidPaths.push("newVideo1.flv");//This is the path to the video for button_0
                vidPaths.push("newVideo2.flv");//This is the path to the video for button_1
                
                myVideo.addEventListener(VideoEvent.COMPLETE,doShowMenu);//run doShowMenu when the video finishes playing
                
                function doShowMenu(e:VideoEvent):void
                {
                     myMenu.visible = true;//display the menu movie clip that has button_0 and button_1 inside it
                     myMenu.button_0.addEventListener(MouseEvent.CLICK,doChangeVideo);//run doChangeVideo when button_0 is clicked
                     myMenu.button_1.addEventListener(MouseEvent.CLICK,doChangeVideo);//run doChangeVideo when button_1 is clicked
                }
                
                function doChangeVideo(e:MouseEvent):void
                {
                     var buttonPressed:Number = e.currentTarget.name.split("_")[1];//get the number button that was pressed.  e.currentTarget gives you the button ".name" gives the instance name of that button ("button_0" or "button_1") and ".split("_")" breaks the name into an Array by the "_" and the [1] gives you the second entry in that array ("0" or "1")
                      myVideo.source = vidPaths[buttonPressed];//set the source to the appropriate video in the vidPaths array
                     myMenu.visible = false;//hide the menu
                }