AJAX Progrraming

Brightcove video event handling is way to capture the video events and perform some operations on occurrence of that event.

Note: Brightcove API services does not work on local environment (for example: direct browsing of page) so you have to host the website on IIS.

Here are the steps to include video on page and capture the events and perform some action on event occurrence.

Open any HTML page and write the mentioned javascript code in head section.

Javascript Section

<script type="text/javascript">

         var player;

         var modVP;

         var modExp;

         var modCon;   

    

         function myTemplateLoaded(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);

             modExp.addEventListener(brightcove.api.events.ExperienceEvent.TEMPLATE_READY, onTemplateReady);

         }

         function onTemplateReady(evt) {        

             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) {

             alert(evt.type);

             if (evt.type === brightcove.api.events.MediaEvent.BEGIN) {

                 alert('Here Video Begins!!');

             }

         }

    </script>

Body Section

<div style="display: none"></div>

    <script language="JavaScript" type="text/javascript"src="http://admin.brightcove.com/js/BrightcoveExperiences.js">       

    </script>

    <object id="myExperience2128824061001"class="BrightcoveExperience">

        <param name="bgcolor" value="#FFFFFF" />

        <param name="width" value="480" />

        <param name="height" value="270" />

        <param name="playerID" value="PLAYED_ID" />

        <param name="playerKey" value="AQ~~,AAABywrPJyk~,MP34hwWOTrN8Z6UocoZHuAZdr8inViSF"/>

        <param name="isVid" value="true" />

        <param name="isUI" value="true" />

        <param name="dynamicStreaming"value="true" />

       

        <!-- smart player api params -->

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

        <param name="templateLoadHandler"value="Test" />

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

        <param name="templateReadyHandler"value="onTemplateReady" />

        <param name="@videoPlayer" value="VIDEO_ID" />

    </object>