3 Replies Latest reply on Aug 28, 2009 10:16 AM by DeyBwah

    How do I hide video player when progress slider reaches end (video ends)?

    DeyBwah

      Hi everyone!

       

      I'm mostly a front-end developer, my strengths revolve around xhtml/css and basic knowledge of using jQuery libraries for basic interactive behaviors.

       

      I just started work at my new employment and to my surprise the job description has changed and I haven't touched xhtml/css, instead, they want me to develop custom applications using Flex! I'm excited as well as a bit nervous because I have very little OOP experience. Nonetheless, I've been learning as fast as I can to meet deadlines for projects.

       

      I'm very new to Flex (started about 1 month ago) as well as AS3 and MXML and this is my first time posting in these forums.

       


      SUMMARY:

       

      I'm working on a video player that someone (previous employee) built and trying to add some Social Sharing Bookmark functionality to it.

       

      In a nutshell, the creative team wants a Social Sharing interface to appear after the video ends. I've built the Sharing Interface, which is pulled into the main application then the Video Player is pulled into the main application on top of the Sharing Interface. I'm not sure if this is the best way to do it, but being so new and under the gun as far as deadlines go, I opted for the simplest way I know. So what I'm trying to do is have the Video Player visibility set to false when the video ends, so the the Sharing Interface that is behind will surface.

       

      Upon searching the web, there were mentions of using the netstream class to listen for the end(stop) but that seemed to complex for the time frame.

       

      I settled on attempting to just use a conditional that checks to see if the HSlider for the Video Player reaches the end, then hide the Video Player.

       

      Here is my code...

       

       

      if (slider.maximum) {

          // slider.value == videoDisplay.totalTime) {

          // videoDisplay.playheadTime == videoDisplay.totalTime) {

          // progressBar.percentComplete(100)) {

          hideVideo();

          }

       

       

      private function hideVideo():void {

                  this.visible = false;

                  // videoDisplay.visible = false;

                  // videoDisplay.includeInLayout = false;

                  }

       

       

       

      <mx:Canvas id="timeLine" width="100%">

             

      <mx:ProgressBar

      id="progressBar"

      styleName="progressBarStyle"

      label=""

      labelPlacement="left"

      width="{timeLine.width-10}"

      trackHeight="10"

      mode="manual"/>

       

      <mx:HSlider

      id="slider"

      styleName="sliderStyle"

      width="{timeLine.width-16}"

      height="100%"

      allowTrackClick="true"

      invertThumbDirection="true"

      liveDragging="false"

      maximum="{videoDisplay.totalTime}"

      minimum="0"

      thumbPress="slider_thumbPress()"

      thumbRelease="slider_thumbRelease()"

      tickInterval="1"

      value="{videoDisplay.playheadTime}"

      showDataTip="false" />

       

      </mx:Canvas>

       

       

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

       

       

      I'm pretty much shooting in the dark and have run out of ammo...

       

      If anyone can enlighten me to the simplest way to get the end result, I would be grateful!!!

       

      Thank you!

       

      DK