Brightcove Begin Playing When Div Made Visible

I have a page that will ultimately contain multiple videos. When the placeholder image is clicked, the placeholder will hide, the video will show and will begin playing.

I can get everything working except the playing part. I have to manually click the play button once the video is visible, which is not what I want.

I keep getting errors about the player being null or undefined. I have tried examples found here and on the Brightcove developer reference, to no avail:

The following is my code (ID's replaced with 00000000s for security purposes):

<div class="video-container">
    <a href="#" class="video-placeholder" data-brightcove-id="00000000"><img src="/media/video-placeholders/myplaceholder.png' class='video-placeholder-photo"><span class="video-placeholder-icon"><i class="material-icons">&#xE038;</i></span></a>
    <div class="video-player" style="display: block;">
            <div id="player" style="display:none">
            </div>
            <script language="JavaScript" type="text/javascript" src="https://sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>
            <object id="player-object" class="BrightcoveExperience">
                <param name="width" value="100%" />
                <param name="height" value="100%" />
                <param name="bgcolor" value="#FFFFFF" />
                <param name="playerID" value="00000000" />
                <param name="playerKey" value="00000000" />
                <param name="isVid" value="true" />
                <param name="isUI" value="true" />
                <param name="dynamicStreaming" value="true" />
                <param name="includeAPI" value="true" />
                <param name="templateLoadHandler" value="onTemplateLoaded" />
                <param name="templateReadyHandler" value="onTemplateReady" />
                <param name="@videoPlayer" value="00000000" id="video-player-param" />
                <param name="autoStart" value="false" />
                <param name="secureConnections" value="true" />
                <param name="secureHTMLConnections" value="true" />
            </object>
    </div>
</div>
<script type="text/javascript" src="https://sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>
<script type="text/javascript">
    var player, modVP;

    var onTemplateLoad = function (experienceID) {
    // get references to the player and API Modules and Events
        console.log('onTemplateLoad has loaded');
        player = brightcove.api.getExperience(experienceID);
            modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
    };

        // template ready event handler
        var onTemplateReady = function (evt) {
            console.log('onTemplateReady is ready');
            modVP.addEventListener(brightcove.api.events.MediaEvent.PLAY, onMediaEventFired);
        };

    $('document').ready(function() {
        $('.video-placeholder').click(function(e) {
            e.stopImmediatePropagation();
            //$('.video-placeholder').show();
            //$('.video-player').hide();
            //$(this).parent().children('.video-placeholder').hide();
            //$(this).parent().children('.video-player').show();
            modVP.play();
            return false;
        })
        });
</script>

Solution

Try to console.log(modVP) within your click handler to insure it contains the object you are expecting. It sounds like modVP isn't a player object with the 'play' function associated to it.

Check out videojs() as well. It sounds like a better use case for you. http://docs.brightcove.com/en/perform/brightcove-player/samples/load-player-dynamically.html The player api and videojs() use can be found http://docs.brightcove.com/en/perform/brightcove-player/reference/api/player.html

Also, it'd help to update your question to include the javascript error you are getting.