Adding a «play button»-overlay to the VideoStill [ Edited ]

[P3TV]

Hi.

I'm working on a single player template based on the «Chromeless Video Player» template. I have the menu disabled so all that you see when the page loads is the video's still image. I'm looking for a way to add a «play»-button as an overlay to the still. Any thoughts of how I might achieve this?

Thanks in advance :)

[BC-Todd · Accepted solution]

Try adding an Image and a Button component on top of the video player and bind their visibility to whether the video is playing. These x/y values work for a 100x100 image in a 480x360 player, but you would need to tweak them to center the button for other dimensions.

    <Image x="190" y="130" width="100" height="100" source="http://admin.brightcove.com/viewer/upgrade_flash_player.gif" visible="{!videoPlayer.playing}"/>

    <Button x="190" y="130" width="100" height="100" click="{videoPlayer.play()}" visible="{!videoPlayer.playing}"/>

<Image x="190" y="130" width="100" height="100" source="http://domain/image.png" visible="{!videoPlayer.playing}"/>

<Button x="190" y="130" width="100" height="100" click="{videoPlayer.play()}" visible="{!videoPlayer.playing}"/>

[EK]

Can this be done outside of the CromelessControls that are only visible on rollover? I'm trying to have a big play button overlay be visible over the center of a  chromeless player when the player first loads, and have the video title show up as an overlay as well when the player first loads, and then when the video is playing have the large play button overlay go away and have the player controls show up. The visible="{videoPlayer.playing}" doesn't seem to work for anything inside the ChromelessControls, and when I try to put anything outside the ChromelessControls tag to create something persistent (that doen't only appear on rollover) I get BEML syntax errors.

[slath]

Is it possible to position the image on the player dynamically, taking into account the width and height set in the HTML.

[tedLim]

two things:

1) is it possible to prevent the play-icon-image from then appearing after the video has finished playing and from covering the elements in the "end" screen?

2) the code given presents the difficulty that after the video has started to play, clicking in the area where the play-icon-image is (when paused) to pause the video does not work. the video pauses for an instant and then continues playing. the problem does not occur when clicking in areas outside the extent of the play-icon-image. can this behaviour be avoided so that a normal play/pause toggle when clicking anywhere on the play area functions?

[tedLim]

oh, and a third thing. :)

3) if the player is positioned inside a VBox or  HBox i cannot position the image and button properly over the video. could someone give a code example showing the image int he middle of the play area with the videoplayer layouted within a VBox or Hbox?

[gregory17]

Hi all,

I'm wondering what options might be available to someone looking to implement this in an Express account? I've been told to look into the Player API, but I'm not sure we have time to build out a custom solution like that quick enough.

Really, I have two needs.

First, to be able to click anywhere on the "still" to play the video.

Second, to have the mouse cursor turn from an arrow to a pointer finger when on the player and it's buttons.

Anyone have any insight?

Thanks!

Greg

[hasitedev]

apologies for being a nube but I don't understand "where" this code goes. Is it part of the brightcove quick publish code or does the code have to be completely custom? A full example would help.

---

BC-Todd wrote:

Try adding an Image and a Button component on top of the video player and bind their visibility to whether the video is playing. These x/y values work for a 100x100 image in a 480x360 player, but you would need to tweak them to center the button for other dimensions.

    <Image x="190" y="130" width="100" height="100" source="" visible="{!videoPlayer.playing}"/>

    <Button x="190" y="130" width="100" height="100" click="{videoPlayer.play()}" visible="{!videoPlayer.playing}"/>

<Image x="190" y="130" width="100" height="100" source="http://domain/image.png" visible="{!videoPlayer.playing}"/>

<Button x="190" y="130" width="100" height="100" click="{videoPlayer.play()}" visible="{!videoPlayer.playing}"/>

---

Thanks!

hasitedev

[phil_n]

it's BEML Code, so you have to create a BEML template (search the brightcove docs for more info on that)

one thing to consider:

if you place the buttons inside the layout element, don't forget to set the depth property to 0, otherwise the button would be underneath the videoplayer and you would never see it.

<Image depth="0" x="190" y="130" width="119" height="50" source="fullpathtobutton.png" visible="{!videoPlayer.playing}"/>