How to change the default overlay play button [ Edited ]

[jjbcsandbox]

Hi,

Please help to change the default overlay play button using BEML code.

I need to change the above default play bottom with custom play button using BEML code.

[BC-Jonathan]

I believe you may find this Custom Player Themes doc useful: http://support.brightcove.com/en/docs/custom-player-themes

Thank you

[jjbcsandbox]

 Thanks Jonathan,

I go through the article that you suggested. That article explaining to customizing the theme by Flash.

Is there any option to change the Overlay Play button and Volume control image without Flash.

We need to call custom Overlay Play button & Volume control Image from external server by BEML code.

[BC-Jonathan]

This example isn't the prettiest thing, as the Play button is off center, but are you looking for something like this: 

http://solutions.brightcove.com/jstickney/samples/overlay/

You could turn off the video overlay in the player settings and then with BEML you could overlay your own play button image like I have done here.

If this is something you are looking for I can show the BEML.

Thanks

[jjbcsandbox]

Thanks Jonathan,

I am expecting the same overlay play button whatever you given.

Can you please share the BEML code.

Thanks.

[PGiStudios]

I am also interested in this kind of customization, and have found very little documentation on how best to go about it.  Can you please post your sample BEML code here for all to enjoy?  Thanks!

[BC-Mikey]

Hi guys,

The template above can be created using the below BEML:

<Runtime>
    <Theme name="Deluxe" style="Light" />
    <Layout>
        <ChromelessVideoPlayer id="videoPlayer" useOverlayMenu="false" video="{videoList.selectedItem}">
            <ChromelessControls boxType="vbox" hAlign="center" visible="{!videoPlayer.menu.open}">
                <!-- Playback controls -->
                <HBox vAlign="bottom" hAlign="center" height="480">
                    <HBox id="defaultView" gutter="6" padding="10" vAlign="middle" maxWidth="820">
                        <ToggleButton id="playButton" width="65" height="40" iconName="play" toggledIconName="pause" tooltip="controls play tooltip" toggledTooltip="Pause" click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}" toggled="{videoPlayer.playing}" enabled="{videoPlayer.video}" />
                        <Canvas height="30">
                            <GraphicBlock />
                            <HBox gutter="4" vAlign="middle">
                                <Spacer width="1" />
                                <Canvas width="40">
                                    <Label id="positionLabel" y="-1" text="{format(videoPlayer.mediaPosition, SecondsTimecodeFormatter)}" vAlign="middle" hAlign="right" alpha=".75" />
                                </Canvas>
                                <Playhead id="playhead" height="6" mediaController="{videoPlayer}" useTimeToolTip="true" enabled="{videoPlayer.video}" />
                                <Canvas width="40">
                                    <Label id="durationLabel" y="-1" text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}" vAlign="middle" hAlign="left" alpha=".75" />
                                </Canvas>
                                <Spacer width="1" />
                            </HBox>
                        </Canvas>
                        <Button id="shareButton" width="35" height="30" iconName="socialShare" tooltip="community socialShare tooltip" data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Share', data)}" visible="{adContext.menuOptionsVisible}" includeInLayout="{!videoPlayer.fullscreen}" />
                        <ToggleButton id="fullscreenButton" width="35" height="30" iconName="maximize" toggledIconName="minimize" tooltip="controls maximize tooltip" toggledTooltip="controls minimize tooltip" click="{videoPlayer.goFullScreen(true)}" toggledClick="{videoPlayer.goFullScreen(false)}" toggled="{videoPlayer.fullscreen}" />
                        <VolumeControl id="volumeButton" width="35" height="30" mediaController="{videoPlayer}" useOverlayLayer="false" iconName="volume" mutedIconName="muted" tooltip="mute tooltip" mutedTooltip="unmute tooltip" useZeroWidth="true" horizontalPadding="10" popupGutter="3" />
                    </HBox>
                </HBox>
                <Spacer height="100" includeInLayout="{videoPlayer.fullscreen}" />
                <Spacer includeInLayout="{!videoPlayer.fullscreen}" />
                <!-- Playlist controls -->
            </ChromelessControls>
        </ChromelessVideoPlayer>
        <Canvas>
            <Image x="0" y="0" width="400" height="225" source="http://solutions.brightcove.com/jnguyen/beml_button/b_play.png" visible="{!videoPlayer.playing}" />
            <Button x="0" y="0" width="400" height="225" click="{videoPlayer.play()}" visible="{!videoPlayer.playing} " />
        </Canvas>
    </Layout>
</Runtime>

[LeeDaubney]

hiya. this code works perfectly for desktop video player but appears off centre on a mobile device.

Is there away of removing/turning off the custom Play overlay button once the video changes into HTML mode on a mobile/tablet?