15 Replies Latest reply on Jun 16, 2010 2:52 AM by djh88ukwb

    s:VideoDIsplay Jump To and Stop

    djh88ukwb Level 1

      Hello All.

       

      Im trying to build a custom video player, using the standard flash builder s:VideoDIsplay.  the video is being streamed from a FMS, so jumping forward in the timeline is almost instant and is fine.

       

      I want to add chapters to it, so the user can click to watch only a selected part of the video, for instance from 30 seconds to 40 seconds.

       

      I have this function -

                  private function jump():void
                  {
                      vp.seek(50);
                  }

      That jumps forward fine,  but i want to be able to add the feature that once the video gets to a certain time, it stops.

       

      For example, running the jump function above will jump you to 50 seconds in, i want to be able to then stop the video at say 60 seconds.

       

      Can anyone help with adding the stopping the video part please?

       

      THanks

        • 1. Re: s:VideoDIsplay Jump To and Stop
          David_F57 Level 5

          hi,

           

           

          In the original example you had there is the players timechange function you could add a section in there for the stop part.

           

          ie. if you have a routine jumpandstop

           

          private var stopTime:int=0;

           

          JumpAndStop(jumpTo:int, stopAt:int=0): void    //<===== if you don't parse a stop time the default will be zero

          {

             if (stopAt > jumpTo)

                    stopTime=stopAt else stopTime=0;

             vp.seek(jumpTo);

          }

           

           

          in your timechange handler

           

          if (event.time > StopTime && StopTime > 0)  vp.stop;

           

          David.

          • 2. Re: s:VideoDIsplay Jump To and Stop
            djh88ukwb Level 1

            Hey thanks for the quick reply !

             

            I am trying to intergrate what you said with ym videodisplay but having problems.

             

            COuld you show me how to use it ?

             

            THe code i have is

             

                <s:VideoDisplay id="vp2" x="374" y="55" source="rtmp://88.208.202.35/vod/Extremists.flv"/>

             

            What would i have to do, to create a funciton that i could link to a button, with the onCLick,  so that it jumped to 20 seconds, and stopped at 30 seconds?

             

             

            Thanks !

            • 3. Re: s:VideoDIsplay Jump To and Stop
              David_F57 Level 5

              hi,

               

              If you have a button then the click event will call the function to set the values

               

              <s:Button click="JumpAndStop(20,50)"/>

               

              this will set the parameters and now the player timeevent will take care of the rest.

               

              David.

              • 4. Re: s:VideoDIsplay Jump To and Stop
                djh88ukwb Level 1

                Hello David

                 

                I am getting errors when trying to implement this =[

                 

                My script is as follows.

                 

                            private var stopTime:int=0;
                               
                            JumpAndStop(jumpTo:int, stopAt:int=0): void    //<===== if you don't parse a stop time the default will be zero
                            {
                                if (stopAt > jumpTo);
                                    stopTime=stopAt else stopTime=0;
                                vp.seek(jumpTo);
                            }

                 

                 

                But it comes up with errores

                 

                Label must be a simple identifier

                Syntax erroe :ecpecting colon before greaterthan

                expecting identifire before if

                expecting rightbrace before else

                 

                ANy ideas on how to fix ?

                • 5. Re: s:VideoDIsplay Jump To and Stop
                  David_F57 Level 5

                  hi,

                   

                  remove the comment it was only there for the post

                   

                   

                  David.

                  • 6. Re: s:VideoDIsplay Jump To and Stop
                    djh88ukwb Level 1

                    This is what i am using

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                   xmlns:s="library://ns.adobe.com/flex/spark"
                                   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
                        <fx:Declarations>
                            <!-- Place non-visual elements (e.g., services, value objects) here -->
                        </fx:Declarations>
                       
                        <fx:Script>
                            <![CDATA[   
                                private var stopTime:int=0;
                                   
                                private function JumpAndStop(jumpTo:int, stopAt:int=0): void
                                {
                                    if (stopAt > jumpTo);
                                        stopTime=stopAt else stopTime=0;
                                    vp.seek(jumpTo);
                                }
                            ]]>
                        </fx:Script>
                       
                        <s:Button x="10" y="292" label="Button" click="jump()"/>
                        <s:VideoDisplay id="vp" x="374" y="55" source="rtmp://88.208.202.35/vod/Extremists.flv"/>
                    </s:Application>

                     

                    But get two errors

                     

                    Expecting rightbrace before semicolon

                    expecting semicolon befire else

                     

                    Any ideas ?  Sorry to be  a pain

                    • 7. Re: s:VideoDIsplay Jump To and Stop
                      David_F57 Level 5

                      hi,

                       

                      Basically you had syntax errors, you terminated the if statement before it started and the button was callling a non existent routine...The following code with timechange event added works like a charm.

                       

                      David

                       

                      <?xml version="1.0" encoding="utf-8"?>

                      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

                      <fx:Declarations>

                      <!-- Place non-visual elements (e.g., services, value objects) here -->

                      </fx:Declarations>

                       

                      <fx:Script>

                      <![CDATA[   

                      import org.osmf.events.TimeEvent;

                      private var stopTime:int=0;

                       

                      private function JumpAndStop(jumpTo:int, stopAt:int=0): void

                      {

                      if (stopAt > jumpTo) 

                           stopTime=stopAt else stopTime=0;

                      vp.seek(jumpTo);

                      vp.play();

                      }

                       

                      protected function vp_currentTimeChangeHandler(event:TimeEvent):void

                      {

                      if (event.time > stopTime) vp.stop();

                      }

                       

                      ]]>

                      </fx:Script>

                       

                      <s:Button x="10" y="292" label="Button" click="JumpAndStop(200,220)"/>

                      <s:VideoDisplay id="vp" x="374" y="55" source="rtmp://88.208.202.35/vod/Extremists.flv" currentTimeChange="vp_currentTimeChangeHandler(event)"/>

                      </s:Application>

                      • 8. Re: s:VideoDIsplay Jump To and Stop
                        djh88ukwb Level 1

                        This works great thanks.  But sorry to be a bother again, is it easy to expand on this ?  And take values from a XML file,bind them into a datagrid, and then depending on which title they click it runs your function ?

                         

                        For instance, using an XML sheet like

                         

                                <film>
                                     <title>Jump</title>
                                     <cat>Comedy</cat>

                                     <start>20</start>

                                     <stop>30</stop>
                                </film>

                         

                         

                        So then the title and cat are pulled into a datagrid, and then when they select one, it runs the function that would run when the folllowing click was being used,

                        click="JumpAndStop(5,12)"

                         

                        Im not sure if it would be possible ?

                         

                        If you need me to explain some more im happy to.

                        • 9. Re: s:VideoDIsplay Jump To and Stop
                          David_F57 Level 5

                          hi,

                           

                          this is pretty straight forward give me a bit and I will put a simple example together(just got home and need to eat ).

                           

                           

                          David

                          1 person found this helpful
                          • 10. Re: s:VideoDIsplay Jump To and Stop
                            djh88ukwb Level 1

                              Thank You, very kind of you


                            • 11. Re: s:VideoDIsplay Jump To and Stop
                              David_F57 Level 5

                              hi,

                               

                              I've updated the example and added a 'click on item to play' datagrid, you could extend this to have the title of the video that you want to play at the moment it just uses your sample video.

                               

                              It works by looking at the row you clicked on and getting the data from the required fields in the row. I've included my test xml as well

                               

                              David

                               

                               

                              <?xml version="1.0" encoding="utf-8"?>

                              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                 xmlns:s="library://ns.adobe.com/flex/spark"

                                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">

                              <fx:Declarations>

                              <s:HTTPService id="myXML" url="test.xml" resultFormat="e4x"

                                 result="myXML_resultHandler(event)"/>

                              </fx:Declarations>

                               

                              <fx:Script>

                              <![CDATA[  

                              import mx.collections.XMLListCollection;

                              import mx.events.FlexEvent;

                              import mx.events.ListEvent;

                              import mx.rpc.events.ResultEvent;

                               

                              import org.osmf.events.TimeEvent;

                              private var stopTime:int=0;

                               

                              [Bindable] private var xmlMainList:XMLListCollection = new XMLListCollection();

                               

                              protected function application1_creationCompleteHandler(event:FlexEvent):void

                              {

                              myXML.send();

                              }

                               

                              private function JumpAndStop(jumpTo:int, stopAt:int=0): void

                              {

                              if (stopAt > jumpTo)

                              stopTime=stopAt else stopTime=0;

                              vp.seek(jumpTo);

                              vp.play();

                              }

                               

                              protected function vp_currentTimeChangeHandler(event:TimeEvent):void

                              {

                              if (event.time > stopTime) vp.stop();

                              }

                               

                              protected function myXML_resultHandler(event:ResultEvent):void

                              {

                              xmlMainList.source = event.result.children();

                              dg.dataProvider=xmlMainList;

                               

                              }

                               

                               

                              protected function dg_itemClickHandler(event:ListEvent):void

                              {

                              var st:int = event.itemRenderer.data.@start;

                              var et:int = event.itemRenderer.data.@stop;

                              JumpAndStop(st,et);

                              }

                               

                              ]]>

                              </fx:Script>

                              <s:VGroup gap="5" horizontalCenter="0">

                              <s:Button label="Button" click="JumpAndStop(200,220)"/>

                              <s:VideoDisplay id="vp" source="rtmp://88.208.202.35/vod/Extremists.flv" currentTimeChange="vp_currentTimeChangeHandler(event)"/>

                              <mx:DataGrid id="dg" width="100%" height="200" itemClick="dg_itemClickHandler(event)">

                              <mx:columns>

                              <mx:DataGridColumn headerText="Title" dataField="@title"/>

                              <mx:DataGridColumn headerText="Category" dataField="@category"/>

                              <mx:DataGridColumn headerText="Start" dataField="@start"/>

                              <mx:DataGridColumn headerText="Finish" dataField="@stop"/>

                              </mx:columns>

                              </mx:DataGrid>

                              </s:VGroup>

                              </s:Application>

                               

                               

                              <?xml v

                              ersion="1.0"?>

                              <films>

                              <film title="Jump" category="comedy" start="20" stop="40"/>

                              <film title="Jumpy" category="drama" start="30" stop="50"/>

                              <film title="Jumper" category="thriller" start="40" stop="60"/>

                              </films>

                              1 person found this helpful
                              • 12. Re: s:VideoDIsplay Jump To and Stop
                                djh88ukwb Level 1

                                Perfect Thanks


                                • 13. Re: s:VideoDIsplay Jump To and Stop
                                  djh88ukwb Level 1

                                  Sorry David,

                                   

                                  One problem i found, i wanted the dataprovider to be in a diferent state, so that i can open it when needed and then close it when not needed.  However when i put the datagrid on a different state the XML file dosent populate it, but if i move it back to the starting state it does.

                                   

                                  Any work about ?

                                  • 14. Re: s:VideoDIsplay Jump To and Stop
                                    David_F57 Level 5

                                    hi,

                                     

                                    for your datagrid add one property itemCreationPolicy="immediate"

                                     

                                    <mx:DataGrid id="dg" width="100%" height="200" itemClick="dg_itemClickHandler(event)" includeIn="State2" itemCreationPolicy="immediate">

                                     

                                    in the click event change the state back

                                     

                                    protected function dg_itemClickHandler(event:ListEvent):void

                                    {

                                    currentState="State1";

                                    var st:int = event.itemRenderer.data.@start;

                                    var et:int = event.itemRenderer.data.@stop;

                                    JumpAndStop(st,et);

                                    }

                                     

                                    • 15. Re: s:VideoDIsplay Jump To and Stop
                                      djh88ukwb Level 1

                                      Perfect

                                       

                                      One last question (i think my previous questions was my last questions sorry)

                                       

                                      But

                                       

                                      Is it easy to add an additional field in the xml say "tooltip"  and then as you hover over items, a tooltip displays ?