Replace default play button on Brightcove's Smart Player on mobile devices

Question

Quite likely I just need the right terms to find the answer; however, I imagine someone else has already encountered this problem and knows right away how to solve it.

I'm using Brightcove's services and their Smart Player. I've configured a Chromeless player and tried to eliminate ALL controls because my page's controls will use their API to play, pause, etc. On desktop, this works just ok. On mobile devices (iOS7 Safari) there is a play button overlay on the video player that I'd like to replace with my own graphic.

I'd like to turn this:

into this:

Anyone know how to do this? I can't just reach into the player with JavaScript because it's in an iframe filled by Brightcove services.

Answer 1

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);
    }

}());