General Development

[ethanobama]

In my custom chromeless video player, I want to use the volume component as a mute/unmute button only by hiding the popup volume slider. I tried to Skype find a property or method for this in BEML and the API but couldn't find anything. Is there a way to hide/disable the volume slider?

The only other idea I had was to try changing the direction property of the slider so it appears below the media controls and increase the padding so that the slider appears off screen, essentially hiding it from view. Seems like this could work, but maybe there's a more elegant solution?

[ethanobama]

In my custom chromeless video player, I want to use the volume component as a mute/unmute button only by hiding the popup volume slider. I tried to Skype find a property or method for this in BEML and the API but couldn't find anything. Is there a way to hide/disable the volume slider?

The only other idea I had was to try changing the direction property of the slider so it appears below the media controls and increase the padding so that the slider appears off screen, essentially hiding it from view. Seems like this could work, but maybe there's a more elegant solution?

[BC-Oscar · Accepted solution]

 I ran into a similar use case the other day. The solution was to use an alternative ToggleButton in the BEML, iniatilly hidden and only displayed when ads played. You can adap it to your use case, depending on whether you want this button to show all the time or on some specific situation. I also tried to modify the slider but that is a lot more work.

<Spacer width="5"/>

                  <ToggleButton id="muteButton" showBack="false"
iconName="volume" includeInLayout="false"
                     toggledIconName="muted"  useZeroWidth="true"
horizontalPadding="7"
                width="30" height="30" click="{videoPlayer.mute(true)}"
                     toggledClick="{videoPlayer.mute(false)}"
toggled="{videoPlayer.muted}"/>

                 <VolumeControl id="volumeButton" width="30"
height="30" mediaController="{videoPlayer}" useOverlayLayer="true"
iconName="volume" mutedIconName="muted" useZeroWidth="true"
horizontalPadding="7" popupGutter="-4" showBack="false"/>
                


And then I used this API code to show/hide each one:


   function onTemplateLoaded(pExperience) {


   player= brightcove.getExperience(pExperience);
   modExp = player.getModule(APIModules.EXPERIENCE);

   adModule = player.getModule(APIModules.ADVERTISING);
   adModule.addEventListener("adStart", onAdStart);
   adModule.addEventListener("adComplete", onAdComplete);
   }



   function onAdStart(evt){
    setAdMode(true);
  }

  function onAdComplete(evt){
    setAdMode(false);
  }


  function setAdMode(pMode) {
    var volumeButton = modExp.getElementByID("volumeButton");
    var muteButton = modExp.getElementByID("muteButton");
    volumeButton.setIncludeInLayout(!pMode);
    muteButton.setIncludeInLayout(pMode);
   }