5 Replies Latest reply on Jun 2, 2010 8:10 AM by David_F57

    Video Display and alternative to cue points

    djh88ukwb Level 1

      Hey Guys, quite a tough question this one.

       

      Is it at all possible to link an image being displayed to the time of a video being displayed?

       

      I have a video player streaming an FLV from a FMS the code is as follows -

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Script>
              <![CDATA[
                  import mx.events.VideoEvent;
                  import flash.net.URLRequest;
                             
                  private function formatTime(item:Date):String {
                      return dateFormatter.format(item);
                  }
                  private function videoDisplay_playheadUpdate():void {
                      var pT:Number = videoDisplay.playheadTime || 0.1;
                      var tT:Number = videoDisplay.totalTime;
                      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;
                  }
                  private function onload(event:Event):void
                  {       
                      videoDisplay.play();   
                  }
              ]]>
          </mx:Script>
         
          <mx:DateFormatter id="dateFormatter" formatString="K:NN:SS" />
         
              <mx:Panel title="({videoDisplay.state})" x="8" y="8" layout="absolute" id="vidP">
                 
                  <mx:VideoDisplay id="videoDisplay"
                                   maintainAspectRatio="true"    autoPlay="false"               
                                   width="400" height="318"
                                   playheadUpdate="videoDisplay_playheadUpdate()"           
                                   live="false"
                                   autoBandWidthDetection="false"
                                   source="rtmp://cp23245.edgefcs.net/ondemand/mp4:23245/mm/flvmedia/2349/t/p/i/tpi_video1_n ew_h264_564K-350110.f4v"
                                   >
                                                  
                  </mx:VideoDisplay>
                 
                  <mx:Button x="5" y="323" width="22" height="15" id="play" visible="{!videoDisplay.playing}"   label="" click="videoDisplay.play()" ></mx:Button>
                  <mx:Button x="5" y="323" width="22" height="15" id="pause" visible="{videoDisplay.playing}"  label="" click="videoDisplay.pause()" ></mx:Button>
                 
                  <mx:HSlider x="30" y="321"
                              id="slider" width="200"
                              allowTrackClick="false"
                              invertThumbDirection="true"
                              liveDragging="false"
                              maximum="{videoDisplay.totalTime}"
                              minimum="0"
                              thumbPress="slider_thumbPress()"
                              thumbRelease="slider_thumbRelease()"
                              tickInterval="0"
                              showTrackHighlight="true"
                              showDataTip="false"
                              value="{videoDisplay.playheadTime}"  height="11"/>
                 
                  <mx:Label x="230" y="323" id="timeLabel" textAlign="right" verticalCenter="middle"  fontSize="9" height="22"/>

          </mx:Panel>   
      </mx:Application>

       

      Now i know its possible to link an image being displayed to the video using Cuepoints, however using cue points i can only change one image.  I need to be able to change two images, depending upon where the video is.

       

      Would i be able to achieve this using the playhead time ?

       

      In short i want the video to play and two images to change at various stages of the video.

       

      SO for instance

       

      Image One to be shown at 5seconds, which will change to Image Two at 10seconds and change to Image Three at 15seconds

      whilst at the same time

      Image A to be shown at 2 seconds, which will change to Image B at 12 seconds and change to Image C at 20 seconds

       

      Im sure this must be do able using the playhead Time,  but can anyone point me in the direction ?

       

      THanks