How do I hook into an event triggered by the end of a Brightcove hosted video?

Question

I have the following code to show a Brightcove player when the user clicks on an image with a play button:

$(document).ready(function() {
    $('#performanceVideo').hide();
    $('#banner_text_wrap').click(function(e) {
        e.preventDefault();
        $('banner-image').hide().fadeOut(slow);
        $('#performanceVideo').show().fadeIn(slow).css({'float':'left','margin-top':'-251px'});
    });
});

I want to fade the image back in when the video ends. How do I hook into the video end event using jQuery? Reading the documentation I think I would need to include addEventListener in the code but I'm a JavaScript novice so any help is appreciated.

Answer 1

Add these two parameters to your player snippet:

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

Then add a javascript function that matches the value you gave for the templateLoadHandler in the snippet params to setup an event listener for the videoPlayers end event.

function myTemplateLoaded(experienceID){
  player = brightcove.api.getExperience(experienceID);
  modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
  modVP.addEventListener(brightcove.api.events.MediaEvent.COMPLETE,onMediaComplete);
}

Then hide the player when the complete event fires:

function onMediaComplete(evt){
  $('#performanceVideo').hide();
  $('banner-image').show().fadeIn(slow);
}