jQuery FancyBox issue with Brightcove .addeventlistener function

Question

Okay guys here's the problem i'm having, i have a video coming from brightcove and i have an event listener added from their api to close the fancybox 2.0 modal window after playback is completed. but the even listener is not happening because fancybox is duplicating the content from the div but not the javascript so the event listener is not being activated.

here is the code

   <!-- Start Brightcove API -->
   <script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/APIModules_all.js"></script>
   <script type="text/javascript">
       var bcExp;
       var modVP;
       function onTemplateLoaded(experienceID) {
           alert("EVENT: TEMPLATE_LOAD");
           bcExp = brightcove.getExperience(experienceID);
           modVP = bcExp.getModule(APIModules.VIDEO_PLAYER);
           modVP.addEventListener(
           BCMediaEvent.COMPLETE, 
           function(event) {
               alert("EVENT: Close Modal Activated");
               jQuery.fancybox.close(true);
           }
       );
       }

       /*   
       function onTemplateLoaded(experienceID) {
           alert("EVENT: TEMPLATE_LOAD");
           bcExp = brightcove.getExperience(experienceID);
           modVP = bcExp.getModule(APIModules.VIDEO_PLAYER);
           modVP.addEventListener(BCMediaEvent.COMPLETE, closeModal);
       }
       function closeModal(event) {
           alert("EVENT: Close Modal Activated");
           jQuery.fancybox.close(true);
       }
        */
   </script>
   <!-- End Brightcove API -->

Any ideas or solutions?

Answer 1

Thanks for the message but i actually figured it out it was a huge goof on my part I was calling fancybox like this

jQuery.document().ready(function() { 
if (document.location.hash === '#video') { 
jQuery.fancybox.open([{ 
content: jQuery('.video').html(), 

the rest isnt important because thats what is breaking it the .html() but whatever glad its fixed now

Answer 2

I have done this with vimeo but usually I create a separated html page with the script to run the video. Then I open that page in Fancybox using the iframe mode (type:'iframe').

For the vimeos's listener I have:

function endOfVideo() {
  parent.$.fancybox.close();
}

vimeoAPI.api_addEventListener("onFinish","endOfVideo"); 

which does the trick.

Looking at the similarities, I guess in your case this should work:

modVP.addEventListener(
 BCMediaEvent.COMPLETE, function(){parent.jQuery.fancybox.close();}
);

Anyway, check your API's documentation for the right format and syntax but jQuery.fancybox.close(); or parent.jQuery.fancybox.close(); if using iframe, should work in any case