4 Replies Latest reply on Aug 19, 2008 12:32 PM by thephantom6969

    SWF Video play controls

    kfles
      I am new to Flex and have been searching for several days without any luck. I have about 70 swf videos that I am trying to create an interface for. I can get the videos to autoplay using SWFLoader but cannot find a way to implement play/pause/stop buttons so that the user can control the video. If it weren't for the quantity of videos I would simply convert them to .flv format, use a VideoDisplay, and be done with it. Is there a way to implement some sort of play/pause/stop buttons within SWFLoader?

      Barring that, the videos were originally embedded into individual html pages that used another swf as an overlay that contained controls, a slider bar, and time counter. There were a lot of parameters passed within the html document and another external xml file and I have no idea how to get them to play nice within Flex (the videos and their files were originally generated using a video screen cap program called Camtasia). Is there a way to embed the html file into some sort of container within the Flex page?
        • 1. Re: SWF Video play controls
          Level 7

          "kfles" <webforumsuser@macromedia.com> wrote in message
          news:g8cr6m$2v1$1@forums.macromedia.com...
          >I am new to Flex and have been searching for several days without any luck.
          >I
          > have about 70 swf videos that I am trying to create an interface for. I
          > can get
          > the videos to autoplay using SWFLoader but cannot find a way to implement
          > play/pause/stop buttons so that the user can control the video. If it
          > weren't
          > for the quantity of videos I would simply convert them to .flv format, use
          > a
          > VideoDisplay, and be done with it. Is there a way to implement some sort
          > of
          > play/pause/stop buttons within SWFLoader?
          >
          > Barring that, the videos were originally embedded into individual html
          > pages
          > that used another swf as an overlay that contained controls, a slider bar,
          > and
          > time counter. There were a lot of parameters passed within the html
          > document
          > and another external xml file and I have no idea how to get them to play
          > nice
          > within Flex (the videos and their files were originally generated using a
          > video
          > screen cap program called Camtasia). Is there a way to embed the html file
          > into
          > some sort of container within the Flex page?

          I think Camtasia is AS2. Probably your best bet is to continue to use
          ExternalInterface, but let Flex do the controlling instead of the old
          controlbar.

          HTH;

          Amy


          • 2. Re: SWF Video play controls
            thephantom6969 Level 1
            Hi,

            I am having the same problem with Camtasia movies. Using ES. Can't get 2 movies in the same file to work. I have converted to flv and use the video player. If you would like I can send you the code. If you find a solution for the swf movies my e-mail is thephantom6969@hotmail.com
            • 3. Re: SWF Video play controls
              kfles Level 1
              If you can post the code you are using I would very much appreciate it. I did a test conversion on one of the videos from .swf to .flv and can't get it to play in VideoDisplay using the examples on the site here. It is entirely possible that I am being obtuse but if I can see how you did it hopefully that will point me in the right direction.

              Thanks for your help with this!
              • 4. Re: SWF Video play controls
                thephantom6969 Level 1
                Here it is. The player is in a popup re-sizable window. I am using a custom component for the resize. You should take it out. Use a TitleWindow or what ever.

                --------------------------

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"

                xmlns:ns1="*"
                >

                <mx:Script>
                <![CDATA[

                import windows.SimplePopupWindow;
                import mx.containers.TitleWindow;
                import mx.core.IFlexDisplayObject;
                import mx.managers.PopUpManager;
                import windows.AdvancedPopupWindow;
                import mx.events.CloseEvent;
                import mx.managers.HistoryManager;
                import mx.events.MetadataEvent;


                private var popMan:PopUpManager;
                private var hisMan:HistoryManager;

                [Bindable] private var pageTitle:String = "";


                private function closeMe():void {
                // this closes the popup window from the inside.
                // you can also do this from the main application as well.
                PopUpManager.removePopUp(this);
                }
                private function initFunc():void {
                // using the popupManager, you can center your window.
                // centering the window from inside the will will generally get your window in the center
                // of the open window. but with centering you have to be careful about what the parent
                // of the window is, because the popupManger will center the window within the bounds of
                // the parent.
                PopUpManager.centerPopUp(this);

                }
                public function setTitle(newTitle:String):void {
                pageTitle = newTitle;
                }

                private function videoDisplay_metadataReceived(evt:MetadataEvent):void{};

                private function formatTime(item:Date):String {
                return dateFormatter.format(item);
                }

                private function videoDisplay_playheadUpdate():void {
                /* If playhead time is 0, set to 100ms so the DateFormatter doesnt return an empty string. */
                var pT:Number = videoDisplay.playheadTime || 0.1;
                var tT:Number = videoDisplay.totalTime;

                /* Convert playheadTime and totalTime from seconds to milliseconds and create new Date objects. */
                var pTimeMS:Date = new Date(pT * 1000);
                var tTimeMS:Date = new Date(tT * 1000);

                timeLabel.text = formatTime(pTimeMS) + " / " + formatTime(tTimeMS);
                }

                private function slider_thumbPress():void {
                videoDisplay.pause();
                }

                private function slider_thumbRelease():void {
                videoDisplay.playheadTime = slider.value;
                videoDisplay.play();
                }

                private function videoDisplay_ready():void {
                videoDisplay.visible = true;
                controlBar.visible = true;
                }
                ]]>


                </mx:Script>
                <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
                <mx:Zoom id="zoom" />




                <!--This is the resizable function start-->

                <ns1:ResizableTitleWindow width="500" height="400"
                x="200" y="300"
                title="Movie Popup and more"
                closeable="true"
                maximizable="false"
                minimizable="false"


                >




                <mx:HBox x="1" y="550">
                <!--Need this other controlbar to set the width of the bar -->
                <mx:ControlBar id="controlBar" visible="false"
                width="100%"
                color="red" fontSize="5">

                <mx:ApplicationControlBar width="100%" fontSize="10">
                <mx:Button label="||" click="videoDisplay.pause();"/>
                <mx:Button label="&gt;" click="videoDisplay.play();"/>
                <mx:Button label="Stop/Rewind" click="videoDisplay.stop();"/>
                <mx:Button label="Clear" click="videoDisplay.mx_internal::videoPlayer.clear();" />
                <mx:HSlider id="slider" width="300"
                allowTrackClick="false"
                invertThumbDirection="true"
                liveDragging="false"
                maximum="{videoDisplay.totalTime}"
                minimum="0"
                thumbPress="slider_thumbPress()"
                thumbRelease="slider_thumbRelease()"
                tickInterval="1"
                value="{videoDisplay.playheadTime}" />
                <mx:Label id="timeLabel" textAlign="right" visible="true"/>
                </mx:ApplicationControlBar>

                </mx:ControlBar>

                </mx:HBox>
                <mx:VideoDisplay id="videoDisplay" visible="false" showEffect="{zoom}"
                x="1" y="0"
                autoPlay="false"
                autoRewind="true"
                playheadUpdate="videoDisplay_playheadUpdate()"
                ready="videoDisplay_ready()"

                rewind="videoDisplay.play()"
                source="Movies/Lmovie1a.flv" />


                </ns1:ResizableTitleWindow>

                </mx:Canvas>