Is there a JS function to make a Brightcove Smart Player video start to play?

Question

I have a video page where the video itself is hidden behind a promotional overlay with images and text using z-indexing. When the user clicks on the image, it fades out revealing the video underneath.

I would like to make the video play when the user clicks on this image, so that they don't have to click on the play button when they see the video, just like you can with a plugin like FlowPlayer?

Is there something along the lines of:

brightcove.playVideo();

I've tried the documentation but I can't find what I'm looking for, as I'm quite inexperienced with third party API's.

Answer 1

Use the player API for this, specifically the video player module.

Enable the API in the player settings in the Studio, and add these parameters to your publishing code:

<param name="includeAPI" value="true" /> 
<param name="templateLoadHandler" value="onTemplateLoad" />

Define the function you specify as the value of templateLoadHandler.

var videoPlayer;
function onTemplateLoad(id) {
  var player = brightcove.api.getExperience(id);
  videoPlayer = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
}

Then to play a video, use videoPlayer.play(). Note that some mobile browsers (including mobile Safari) will not allow playback until the player has been interacted with - you can use videoPlayer.canPlayWithoutInteraction to determine whether play() will work.

Further API docs/examples here.