2 Replies Latest reply on Jun 9, 2010 11:00 PM by nishadmusthafa

    How to embed interaction in flex video player..

    magzkd

      Hi All,

       

      I have scenario in which I need to bring interaction(like doing survey or askig username and pwd) in flex video player while playing the video.Do flex video player have any events for this...i'm using flex 4...Can anyone help me on this??

       

      thanks

       

      magz

        • 1. Re: How to embed interaction in flex video player..
          Unni Gopinathan S Adobe Employee

          Hi,

          VideoDisplay have an event called "enterFrame" which will get triggered for every frame.

          Another way is to set "cuePoints" and "cuePoint event".
          Flex examples for cue points.

          http://blog.flexexamples.com/2007/08/09/dynamically-creating-actionscript-cue-points-from- flashvars-received-from-the-html-container/
          http://blog.flexexamples.com/2007/07/29/creating-actionscript-cue-points-with-the-videodis play-control/


          Sample code which will popup the login form in the begining of the video and after playing half video.

          <?xml version="1.0" encoding="utf-8"?>
          <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx" width="820" height="519">

          <fx:Script>
            <![CDATA[
             private var frameCount:int=0;
            
             private var notreachedMid:Boolean = true;

             protected function myVid_enterFrameHandler(event:Event):void
             {
              if(myVid.playheadTime == 0 && frameCount == 0)
              {
               trace("Login in start up.");
               this.currentState="loginState";
               frameCount++;
              }
              else if(myVid.playheadTime > (myVid.totalTime/2) &&  notreachedMid)
              {
               trace("Login after playing half");
               myVid.pause();
               this.currentState="loginState";
               notreachedMid = false
              }
             }


             protected function button1_clickHandler(event:MouseEvent):void
             {
              if(usrName.text == "unni" && passWrd.text == "unni")
              {
               callLater(foo);
               usrName.text ="";
               passWrd.text="";
               myVid.play();
              }
             }
             private function foo():void
             {
              this.currentState="StartState";
             }

            ]]>
          </fx:Script>
          <s:states>
            <s:State name="StartState">
            </s:State>
            <s:State name="loginState">
            </s:State>
          </s:states>

          <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <mx:VideoDisplay id="myVid" source="E:\FlashBuilderWrkSpaces\Project\TestProject\assets\20051210-w50s.flv" autoPlay="false"
                x="10" y="10" width="800" height="500" enterFrame="myVid_enterFrameHandler(event)" />
          <mx:Form includeIn="loginState" x="273" y="206">
            <mx:FormItem label="Name">
             <mx:TextInput id="usrName"/>
            </mx:FormItem>
            <mx:FormItem label="Password">
             <mx:TextInput id="passWrd" displayAsPassword="true"/>
            </mx:FormItem>
            <mx:FormItem >
             <mx:Button label="Submit" click="button1_clickHandler(event)"/>
            </mx:FormItem>
          </mx:Form>
          </s:WindowedApplication>

          • 2. Re: How to embed interaction in flex video player..
            nishadmusthafa

            Hi,

             

             

            You could create a small custom component(something like a form). Create a custom skin for your video player which is a copy of

             

            spark.skins.spark.VideoPlayerSkin

             

             

            You can then add the component you created for the interactions to this skin. Go through the source code of the skin to get a better idea of what i want.

             

            This is just one solutions. there are other ways. Do let me know if you require anything specific.

             

            Nishad