You can do this with a javascript player plugin, which runs inside the player iframe. Use the overlay API to create your custom play button and playOverlayCallbacks() to prevent the default play overlay from being displayed.
Something like this would work in a plugin:
(function() {
function addPlayOverlay() {
var overlay = videoPlayer.overlay();
$(overlay).css('background', 'transparent url("http://example.com/playbutton.png") no-repeat center center')
.width($(document).width())
.height($(document).height())
.css("-webkit-box-shadow","inset 0 0 150px rgba(0,0,0,0.9)")
;
$(overlay).click(function(){
// Play when custom overlay is clicked
videoPlayer.play();
});
videoPlayer.playOverlayCallbacks({
show: function() {
// Show custom overlay
$(overlay).fadeIn();
// Prevent standard play overlay
return false;
},
hide: function() {
// Hide play overlay
$(overlay).fadeOut();
return false;
}
});
}
var
bcplayer = brightcove.api.getExperience(),
videoPlayer = bcplayer.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER),
experience = bcplayer.getModule(brightcove.api.modules.APIModules.EXPERIENCE);;
if (experience.getReady()) {
addPlayOverlay();
} else {
experience.addEventListener(brightcove.player.events.ExperienceEvent.TEMPLATE_READY, addPlayOverlay);
}
}());