This below code will work as expected..
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Player Event Tester</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<div id="player" style="float: left">
<object id="myExperience1754261637001" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="480" />
<param name="height" value="270" />
<param name="playerID" value="2549948545001" />
<param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisreVadKjzdyJfLcfukyXcGqB" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="myTemplateLoaded" />
<param name="templateReadyHandler" value="onTemplateReady">
<param name="@videoPlayer" value="1754261637001" />
</object>
<div>
<button id="changeVideo" onclick="changeVideo()">Change Video</button>
<div class="overlay_play_big">Play</div>
</div>
</div>
<script type="text/javascript">
brightcove.createExperiences();
</script>
<div id="log" style="float: left">
<div id="positionLog"></div>
<div id="eventLog"></div>
</div>
<script>
var myTemplateLoaded, onTemplateReady, player, modVP, modExp, modCon, previousVideoID=0, currentVideo, videosToSwap=new Array(1754261637001,1754261438001); //videos we will swap
myTemplateLoaded = function (experienceID) {
player = brightcove.api.getExperience(experienceID);
modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
modExp = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
modCon = player.getModule(brightcove.api.modules.APIModules.CONTENT);
}
onTemplateReady = function (evt) {
modVP.getCurrentVideo(function (dto) {
});
modVP.addEventListener(brightcove.api.events.MediaEvent.BEGIN, onMediaEventFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.CHANGE, onMediaEventFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, onMediaEventFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.ERROR, onMediaEventFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.PLAY, onMediaEventFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.PROGRESS, onMediaProgressFired);
modVP.addEventListener(brightcove.api.events.MediaEvent.STOP, onMediaEventFired);
}
function onMediaEventFired(evt) {
document.getElementById("eventLog").innerHTML += "MEDIA EVENT: " + evt.type + " fired at position: " + evt.position + "<BR>";
if (evt.type === "mediaComplete") {
//changeVideo();
alert('ended');
}
}
function onMediaProgressFired(evt) {
document.getElementById("positionLog").innerHTML = "CURRENT POSITION: " + evt.position;
}
function changeVideo() {
modVP.getCurrentVideo(currentVideoCallback);
}
function currentVideoCallback(currentVideo) {
document.getElementById("positionLog").innerHTML = "";
document.getElementById("eventLog").innerHTML = "";
if (currentVideo.id == videosToSwap[0]) {
modVP.loadVideoByID(videosToSwap[1]);
} else {
modVP.loadVideoByID(videosToSwap[0]);
}
}
$('.overlay_play_big').on('click',function(){
modVP.play();
});
</script>
</body>
</html>