6 Replies Latest reply on Dec 18, 2009 1:07 PM by cyber0897

    creating custom video player... need help

    cyber0897 Level 1

      hey guys... so im trying to create a flv player for my application...

      basically i was wondering how i would go about creating customised buttons for the player... ? customise the video control bar... like to include a line instead of the dot..

       

      oh and also... my application basically has a spart list on the left... and when you click one of the list items, there is a "watch video" button on top of an image...

      when you click that image, i need this video player to popup on top of that image... kinda like a second layer, and have a close button on the top right corner... when you click that cross button the video needs to close and go back to the image i was on earlier...

       

       

      any ideas on how to create the second layer for the video?? I dont want it to be like an alert message popup... but somehting which resides on top of my image... so if i scroll the video will scroll up with it.. hopefully that makes sence..

       

       

      any help is greatly appretiated

        • 1. Re: creating custom video player... need help
          rfrishbe Level 3

          For customizing a video player, I would just use the Spark VideoPlayer control and skin it to your heart's content.  I'd start with the Spark skin and just modify it and it's subpieces to be what you want.  It's a pretty complex skin and there's normal and full-screen skins, but you can simplify that down if you want.  I wasn't sure what you meant by "include a line instead of the dot" but I'm hoping skinning should allow you to customize it how you'd like.

           

          As per the popup, hopefully you could just put that in your item renderer.  You can either include it as a regular component and try using the depth property and includeInLayout=false to achieve what you want, or you can try using the <s:PopUpAnchor> control to do what you want.  Hopefully looking in to those two approaches will set you off in the right direction.

           

          -Ryan

          1 person found this helpful
          • 2. Re: creating custom video player... need help
            cyber0897 Level 1

            hey ryan... thanks for replying so fast... i dont have a itemrenderer for the image and video display... but i think im going to create one right now to try out the popupanchor and hte properties you suggested...

             

            as per the skinning of the video player.. i have no idea how to do that... im farely new to flash/flex programming... is there any tutorials or some document which would show me how to skin a component??

             

             

            thanks a lot

            • 3. Re: creating custom video player... need help
              rfrishbe Level 3

              I'm biased, but a good place to learn about skinning is here: http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

               

              As per the ItemRenderer, I guess I'm not sure what's getting shown in your list.  If it's just text, you don't need a custom item rendererl; however, if you want to display an image and a video associated with the data in the list and have it be part of the list, then you should use a custom item renderer to do this.

               

              -Ryan

              1 person found this helpful
              • 4. Re: creating custom video player... need help
                cyber0897 Level 1

                hmm... i tried the popupanchor, and includeInLayout as mentioned earlier.. and it didnt work

                 

                maybe its just the way i have my application designed...

                 

                the mxml code i have is

                 

                    <mx:HBox>
                        <mx:TabNavigator id="tabNav" width="275" tabStyleName="tabStyle" fontWeight="bold" height="400" paddingTop="0"
                                         tabWidth="137.5" creationPolicy="all" borderVisible="false">
                            <mx:VBox label="USER OPTIONS" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                <s:List id="userOptions" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                                        borderVisible="false" contentBackgroundColor="#e9e9e9"
                                        change="userOptionsChange(event)">
                                    <s:dataProvider>
                                        <s:XMLListCollection id="userOptionProvider" />
                                    </s:dataProvider>
                                </s:List>
                            </mx:VBox>
                            <mx:VBox label="TROUBLESHOOTING">
                                <s:List id="trouble" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                                        borderAlpha="0" borderVisible="false" contentBackgroundColor="#e9e9e9"
                                        change="troubleShootChange(event)">
                                    <s:dataProvider>
                                        <s:XMLListCollection id="troubleShootProvider" />
                                    </s:dataProvider>
                                </s:List>
                            </mx:VBox>
                        </mx:TabNavigator>
                       
                    </mx:HBox>
                    <s:Group id="imageDefine" width="700" height="375" x="275" y="24">
                        <mx:Image id="definition" width="700" height="375"/>
                        <s:VideoPlayer id="videoPlayer" width="700" height="375" visible="false" />
                        <s:Group id="dynamicButtons" width="700" height="375"/>
                    </s:Group>
                    <mx:HBox id="navContainer" x="640" y="371" paddingRight="10" paddingBottom="10">
                        <mx:LinkButton label="WATCH VIDEO" id="watchVideo" skin="{null}" click="playVideo()" visible="true" paddingRight="20"  />
                        <mx:LinkButton label="Back" id="back" skin="{null}" styleName="navButton" visible="true" click="backClickHandler(event)" />
                        <mx:LinkButton label="More Options" id="next" skin="{null}" styleName="navButton" visible="true" click="nextClickHandler(event)" />
                    </mx:HBox>

                 

                the item renderer i have on the list basically is for the display of the list

                 

                when you click on one of the list item, i basically set the image tag with the source of the image, and then i dynamically add buttons on top of that image, in the "dynamicButtons" group....

                 

                when i hit the button watch video, the buttons i have on that page dont go behind the video...

                 

                any other suggestions?? and again thanks a lot

                • 5. Re: creating custom video player... need help
                  rfrishbe Level 3

                  That's why what you really want is it to be popped up, and looking at PopUpAnchor might be a good solution for you.  However, as a simple solution to get the VideoPlayer to popup in front of the link buttons, try setting imageDefine.depth = 2 in playVideo().  Assuming imageDefine's parent is a Spark container (like VGroup, Group, or some SkinnableContainer), then that should work.  After you're done playing the video, you should set imageDefine.depth back to 0.

                   

                  Hope that helps,

                  Ryan

                  • 6. Re: creating custom video player... need help
                    cyber0897 Level 1

                    aha, thanks ryan... that worked like a champ...