Скрыть некоторые элементы управления Spark VideoPlayer в моем проекте Flex

Question

Я хочу удалить (скрыть) некоторые элементы управления моего видеопроигрывателя в моем проекте flex. Они просто Отмеченный в этой картине:

Например, я могу использовать videoPlayer.scrubBar.visible = false, чтобы скрыть scrubBar, но если я использую его для FullScreenButton хотя это скрыть, но место кнопка будет оставаться пусто! Или я не знаю как удалить или скрыть currentTime/duration.

PS: предпочитает не использовать кожи, потому что это довольно простой проект, и я не хочу, чтобы увеличить свои классы и т.д ...

Answer 1

Вы можете продлить VideoDisplay component-- и создать собственный скин - чтобы эти части кожи были легко скрыты/отображены во время выполнения, если хотите. Или вы можете напрямую получить доступ к частям кожи и изменить свойство видимости.

Но лучший способ сделать это - создать пользовательский скин. Вот один из них, который взял меня на пару минут и выполняет все, что вы просите.

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

<!-- 

    ADOBE SYSTEMS INCORPORATED 
    Copyright 2008 Adobe Systems Incorporated 
    All Rights Reserved. 

    NOTICE: Adobe permits you to use, modify, and distribute this file 
    in accordance with the terms of the license agreement accompanying it. 

--> 

<!--- The default skin class for the Spark VideoPlayer component. 

    @see spark.components.VideoPlayer 

     @langversion 3.0 
     @playerversion Flash 10 
     @playerversion AIR 1.5 
     @productversion Flex 4 
--> 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="0.5" 
    chromeColor.fullScreenStates="0xCCCCCC"> 
    <!-- A chrome color of 0xCCCCCC in the fullScreenStates means we ignore the chromeColor property 
     all together as 0xCCCCCC is essentially just a no-op color transform --> 

    <!-- host component --> 
    <fx:Metadata> 
     /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent 
     */ 
     [HostComponent("spark.components.VideoPlayer")] 
    </fx:Metadata> 

    <fx:Script fb:purpose="styling"> 
     <![CDATA[ 
      /* Define the skin elements that should not be colorized. */ 
      static private const exclusions:Array = ["videoDisplay", "playPauseButton", "scrubBar", 
                "currentTimeDisplay", "timeDivider", "durationDisplay", 
                "volumeBar", "fullScreenButton"]; 

      /** 
      * @private 
      */ 
      override protected function initializationComplete():void 
      { 
       useChromeColor = true; 
       super.initializationComplete(); 
      } 

      /** 
      * @private 
      */ 
      override public function get colorizeExclusions():Array 
      { 
       return exclusions; 
      } 

      /** 
      * @private 
      */ 
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
      { 
       dropShadow.visible = getStyle("dropShadowVisible"); 

       super.updateDisplayList(unscaledWidth, unscaledHeight); 
      } 
     ]]> 

    </fx:Script> 

    <!-- states --> 
    <s:states> 
     <s:State name="uninitialized" stateGroups="uninitializedStates, normalStates" /> 
     <s:State name="loading" stateGroups="loadingStates, normalStates" /> 
     <s:State name="ready" stateGroups="readyStates, normalStates" /> 
     <s:State name="playing" stateGroups="playingStates, normalStates" /> 
     <s:State name="paused" stateGroups="pausedStates, normalStates" /> 
     <s:State name="buffering" stateGroups="bufferingStates, normalStates" /> 
     <s:State name="playbackError" stateGroups="playbackErrorStates, normalStates" /> 
     <s:State name="disabled" stateGroups="disabledStates, normalStates"/> 
     <s:State name="uninitializedAndFullScreen" stateGroups="uninitializedStates, fullScreenStates" /> 
     <s:State name="loadingAndFullScreen" stateGroups="loadingStates, fullScreenStates" /> 
     <s:State name="readyAndFullScreen" stateGroups="readyStates, fullScreenStates" /> 
     <s:State name="playingAndFullScreen" stateGroups="playingStates, fullScreenStates" /> 
     <s:State name="pausedAndFullScreen" stateGroups="pausedStates, fullScreenStates" /> 
     <s:State name="bufferingAndFullScreen" stateGroups="bufferingStates, fullScreenStates" /> 
     <s:State name="playbackErrorAndFullScreen" stateGroups="playbackErrorStates, fullScreenStates" /> 
     <s:State name="disabledAndFullScreen" stateGroups="disabledStates, fullScreenStates"/> 
    </s:states> 

    <!-- drop shadow --> 
    <!--- @private --> 
    <s:RectangularDropShadow id="dropShadow" blurX="17" blurY="17" alpha="0.32" distance="4" 
       angle="90" color="#131313" left="0" top="0" right="0" bottom="0" 
       excludeFrom="fullScreenStates"/> 

    <!--- Video and player controls are clipped if they exceed the size of the 
      component, but the drop shadow above is not clipped and sizes to the component. 
      We also set verticalScrollPosition so that when we do clip, rather than clipping 
      off the bottom first, we clip off the top fist. This is so the player controls 
      are still visible when we start clipping. --> 
    <s:Group id="clippedGroup" clipAndEnableScrolling="true" left="0" top="0" right="0" bottom="0" 
      verticalScrollPosition="{Math.max(0, 184-clippedGroup.height)}"> 

     <!-- There's a minimum size for the video and controls. If we go below that 
      we are clipped. --> 
     <s:Group minWidth="263" minHeight="184" left="0" right="0" top="0" bottom="0"> 

      <!-- background when the videoDisplay doesn't fill its whole spot --> 
      <s:Rect bottom="1" left="1" right="1" top="1" 
        bottom.fullScreenStates="0" left.fullScreenStates="0" 
        right.fullScreenStates="0" top.fullScreenStates="0"> 
       <s:fill> 
        <s:SolidColor color="0x000000" /> 
       </s:fill> 
      </s:Rect> 

      <!--- @copy spark.components.VideoPlayer#videoDisplay --> 
      <s:VideoDisplay id="videoDisplay" bottom="24" left="1" right="1" top="1" 
          bottom.fullScreenStates="0" left.fullScreenStates="0" 
          right.fullScreenStates="0" top.fullScreenStates="0" /> 

      <!-- video player controls --> 
      <s:Group left="0" right="0" height="24" bottom="0" bottom.fullScreenStates="150"> 

       <!-- actual controls with a maxWidth in non-fullScreen mode --> 
       <!--- @copy spark.components.VideoPlayer#playerControls --> 
       <s:Group bottom="0" horizontalCenter="0" left="0" right="0" maxWidth.fullScreenStates="755" id="playerControls"> 

        <!--- @copy spark.components.VideoPlayer#playPauseButton --> 
        <s:ToggleButton id="playPauseButton" left="0" bottom="0" 
          skinClass="spark.skins.spark.mediaClasses.normal.PlayPauseButtonSkin" 
          skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.PlayPauseButtonSkin" 
          layoutDirection="ltr" 
          focusIn="event.target.depth=1" focusOut="event.target.depth=0" /> 

        <!-- scrubbar + the currentTime/duration labels --> 
        <s:Group left="39" right="75" top="0" bottom="0"> 

         <!-- background for scrubbar + the currentTime/duration --> 
         <s:Rect left="0" right="0" top="0" bottom="0"> 
          <s:fill> 
           <s:LinearGradient rotation="90"> 
            <s:GradientEntry color="0xFFFFFF" color.fullScreenStates="0x585858" alpha.fullScreenStates="0.55"/> 
            <s:GradientEntry color="0xDCDCDC" color.fullScreenStates="0x1E1E1E" alpha.fullScreenStates="0.55"/> 
           </s:LinearGradient> 
          </s:fill> 
         </s:Rect> 

         <!-- fill highlight (exclude in fullScreen) --> 
         <s:Rect left="1" right="1" top="1" height="11" excludeFrom="fullScreenStates"> 
          <s:fill> 
           <s:SolidColor color="0xFFFFFF" alpha="0.3" /> 
          </s:fill> 
         </s:Rect> 

         <!-- one pixel border --> 
         <s:Rect left="1" right="1" top="1" bottom="1"> 
          <s:stroke> 
           <s:LinearGradientStroke weight="1" rotation="90"> 
            <s:GradientEntry color="0xFEFEFE" color.fullScreenStates="0xFFFFFF" alpha.fullScreenStates="0.12" /> 
            <s:GradientEntry color="0xEAEAEA" color.fullScreenStates="0xFFFFFF" alpha.fullScreenStates="0.09" /> 
           </s:LinearGradientStroke> 
          </s:stroke> 
         </s:Rect> 

         <!-- border for the scrubbar/time label controls --> 
         <s:Rect left="-1" right="0" top="0" bottom="0"> 
          <s:stroke> 
           <s:SolidColorStroke color="0x131313" color.fullScreenStates="0x222222" alpha.fullScreenStates="0.66" /> 
          </s:stroke> 
         </s:Rect> 

         <!-- scrub bar + currentTime/duration in a HorizontalLayout --> 
         <s:Group left="0" right="0" height="23" bottom="0"> 
          <s:layout> 
           <s:HorizontalLayout verticalAlign="middle" gap="1" /> 
          </s:layout> 

          <!-- spacer --> 
          <s:Rect width="7" height="1" /> 

          <!--- @copy spark.components.VideoPlayer#scrubBar --> 
<!--       <s:ScrubBar id="scrubBar" width="100%" liveDragging="true" 
           skinClass="spark.skins.spark.mediaClasses.normal.ScrubBarSkin" 
           skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.ScrubBarSkin" /> 
-->        
          <!-- spacer --> 
          <s:Rect width="8" height="1" /> 

          <!--- @copy spark.components.VideoPlayer#currentTimeDisplay --> 
<!--       <s:Label id="currentTimeDisplay" color.fullScreenStates="0xFFFFFF" /> 
-->        
          <!--- @private --> 
    <!--       <s:Label id="timeDivider" text="/" color.fullScreenStates="0xFFFFFF" /> 
    -->       
          <!--- @copy spark.components.VideoPlayer#durationDisplay --> 
<!--       <s:Label id="durationDisplay" color.fullScreenStates="0xFFFFFF" /> 
-->        
          <!-- spacer --> 
          <s:Rect width="8" height="1" /> 
         </s:Group> 

        </s:Group> 

        <!--- @copy spark.components.VideoPlayer#volumeBar --> 
        <s:VolumeBar id="volumeBar" snapInterval=".01" stepSize=".01" liveDragging="true" 
          right="37" bottom="0" 
          layoutDirection="ltr" 
          skinClass="spark.skins.spark.mediaClasses.normal.VolumeBarSkin" 
          skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.VolumeBarSkin" 
          focusIn="event.target.depth=1" focusOut="event.target.depth=0" /> 

        <!--- @copy spark.components.VideoPlayer#fullScreenButton --> 
<!--     <s:Button id="fullScreenButton" right="0" bottom="0" label="Fullscreen" 
          skinClass="spark.skins.spark.mediaClasses.normal.FullScreenButtonSkin" 
          skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.FullScreenButtonSkin" 
          focusIn="event.target.depth=1" focusOut="event.target.depth=0" /> 
-->        
       </s:Group> 

      </s:Group> 

      <!-- border --> 
      <s:Rect left="0" right="0" top="0" bottom="0" excludeFrom="fullScreenStates"> 
       <s:stroke> 
        <s:SolidColorStroke color="0x131313" /> 
       </s:stroke> 
      </s:Rect> 

     </s:Group> 
    </s:Group> 
</s:SparkSkin>