How to reposition MediaControls after fullscreen in VideoPlayer [ Edited ]

[leongaban]

In my customized VideoPlayer, I've reskinned the MediaControls. However, now in Fullscreen mode my buttons don't resize and go to the bottom of the fullscreen video player.

I can also see the background color in my theme not stretch out as well, also when the video plays there is a split sec where I can see that the MediaControl buttons & bar are stuck at the original height and width in the top left of the screen. What would I need to do to fix that?

Custom player:

http://touchstormdigital.com/leon/howdini2/brightcove_forum/fullscreenControls.html

BEML:

<!-- Buttons: Play + Maximize + Volume -->
<HBox width="100%" x="0" y="1" gutter="0" padding="0">

  <ToggleButton visible="{adContext.playPauseVisible}" width="60" showBack="false" 
                iconName="play" toggledIconName="pause" 
                tooltip="play" toggledTooltip="pause" 
                height="20" autoSize="false" lockHeight="true"  
                iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="20" 
                click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}" 
                toggled="{videoPlayer.playing}"/>
  <Spacer />
  
  <Button visible="{adContext.maximizeVisible}" showBack="false" 
          iconName="maximize" tooltip="controls maximize tooltip" 
          width="37" height="34" click="{videoPlayer.goFullScreen()}"/>
  
  <VolumeControl id="volumeButton" visible="{adContext.volumeVisible}" showBack="false" 
                         iconName="volume" mutedIconName="muted" 
                         tooltip="mute tooltip" mutedTooltip="unmute tooltip" 
                         width="35" height="34" mediaController="{videoPlayer}"/>
</HBox>

[leongaban]

Ok I found a different / default way around this problem:

<VideoDisplay id="videoPlayer" height="360" includeFullscreenControls="true"/>

I added includeFullscreenControls="true" and now the default VideoPlayer fullscreen controls will come up. While this is nice and basically fixes my problem, I'm still wondering if there is a way to still use my customized controls by repositioning them to the bottom of the screen when in fullscreen mode...

[BC-Mikey]

Hi,

I was unable to view your original link to see what your controls looked like prior to Full Screen. However, basically what you can do is create two sets of controls, lay them out properly inside of a <Canvas> tag, and then use the includeInLayout="{videoPlayer.fullscreen}" and includeInLayout="{!videoPlayer.fullscreen}" attributes to define which set of controls appear in Full Screen mode vs. which ones do not.

Hope this helps!

[leongaban]

Hey Mikey thanks! I will try that out and will report back... :)

btw just updated the link and here is what the controls look like: http://touchstormdigital.com/leon/howdini2/brightcove_forum/fullscreenControls.html

[mikehalwits]

so thanks for giving these post and its a very useful for us.

[BC-Mikey · Accepted solution]

Thanks for re-posting your template. The 'includeInLayout' attribute will still work for defining different states at which the component should appear (for example, ad contexts, when the video is playing, etc.), however, I should have noted that the functionality you were looking for is only achievable with our <ChromelessControls> Component as opposed to the <MediaControls> component.

This is because the <MediaControls> is not made to be presented in Full Screen mode, it'll always end up in the background whereas if you include a component as a child of the <ChromelessControls> component it will have the ability to appear on top of your video using the {!videoPlayer.fullscreen} state.

Sorry for not making that more clear before.

[leongaban]

Oh ok, yeah we will be using the VideoPlayer instead of Chromeless because we need the controls to be visible at all times. Oh well, I have 2 new questions then:

1) What is the BEML to hide the controls once the fullscreen button has been clicked? Sometimes if there is a slight lag in loading the video, the controls will still be seen in the top right of the screen. It would be great if there was some kinda MediaControls.visible = false or something as soon as fullscreen is triggered.

2) How would we reskin the VideoPlayer's default fullscreen controls? Would it be another custom SWF that has new control buttons in it? And if so is there a source file anywhere with associated code we could take a look at and reskin? :)

[BC-Mikey]

1) Does adding visible="{!videoPlayer.fullscreen}" to the MediaControls tag resolve this issue?

2) Unfortunately this is built into the MediaControls SWF and can't be reskinned. The best way to go about doing this is to build a Custom SWF that's triggered when you enter full screen in the Player.

[leongaban]

yup that worked!

<MediaControls id="mediaControls" visible="{!videoPlayer.fullscreen}" hAlign="center" height="30" gutter="0" padding="0" theme="theme.swf">

I kept testing till I got the the player to go fullscreen with a bit of lag, and the controls did not stay on the screen in the top right! I'm testing using visible="{!videoPlayer.fullscreen}" on my CustomSWF now as well, since that still gets stuck on the screen...

[BC-Mikey]

Awesome!

Also, as a tip, if you want to verify BEML changes quickly you should use the 'Preview' button in the Publishing Module (from the 'All Players' section) which brings up the console.brightcove.com URL. The live Player will most likely still have your old BEML cached and take a few minutes before you see the BEML updates made. This can get frustrating when making minor updates, so its good to use the console.brightcove.com URL for verifying changes like these.