Using Brightcover player with external JS

I'm having a heck of a time getting the brightcove Smart Player API to work on any external JS files. I have no problems with calling the standard API methods like onTemplateLoad and onTemplateReady within the index.html, but as soon as they are moved out to external coffeescript, i get nothing :( All the API documentation from BrightCove uses internal javascript.

The BrightCoveExperiences.js is included in the HTML body, right next to the player div.

My JS load order is thus (in Jade), whereby beast.js is the goods:

script(type="text/javascript", src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
script(type="text/javascript", src="js/contentful.min.js")
script(type="text/javascript", src="js/handlebars.js")
script(type="text/javascript", src="js/showdown.js")
script(type="text/javascript", src="js/moment.js")
script(src="js/beast.js", type="text/javascript")

Within beast.js, I'm injecting the following:

<object type="application/x-shockwave-flash" data="http://c.brightcove.com/services/viewer/federated_f9?&amp;width=480&amp;height=270&amp;flashID=myExperience&amp;bgcolor=%23FFFFFF&amp;playerID=1507808033001&amp;playerKey=AQ~~%2CAAABXxBZKsE~%2CAdU2xXeQoKCatdLR1Pb_eo4UzCFcjSKc&amp;isVid=true&amp;isUI=true&amp;dynamicStreaming=true&amp;%40videoPlayer=2114345471001&amp;includeAPI=true&amp;templateLoadHandler=onTemplateLoad&amp;templateReadyHandler=brightcove%5B%22templateReadyHandlermyExperience%22%5D&amp;autoStart=&amp;debuggerID=&amp;originalTemplateReadyHandler=onTemplateReady&amp;startTime=1408987173053" id="myExperience" width="480" height="270" class="BrightcoveExperience" seamlesstabbing="undefined">

<param name="allowScriptAccess" value="always">
<param name="allowFullScreen" value="true">
<param name="seamlessTabbing" value="false">
<param name="swliveconnect" value="true">
<param name="wmode" value="window"><param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">

Which, in theory, should call the onTemplateReady and onTemplateLoad functions:

onTemplateLoad = (experienceID) ->
    player = brightcove.api.getExperience(experienceID)
    APIModules = brightcove.api.modules.APIModules
    console.log 'im so loaded man'

onTemplateReady = (evt) ->
    videoPlayer = player.getModule(APIModules.VIDEO_PLAYER)
    videoPlayer.play()
    console.log 'ready'

But alas... I should also mention, I'm not a BrightCove fan.

Thanks,

James

Solution

CoffeeScript wraps the compiled JavaScript in a self-invoking function to avoid polluting the global namespace:

Although suppressed within this documentation for clarity, all CoffeeScript output is wrapped in an anonymous function: (function(){ ... })(); This safety wrapper, combined with the automatic generation of the var keyword, make it exceedingly difficult to pollute the global namespace by accident.

That means that your two functions

onTemplateLoad = (experienceID) -> ...
onTemplateReady = (evt) -> ...

are not globally available, they're hidden like this:

(function() {
    var onTemplateLoad = function(experienceId) { ... };
    var onTemplateReady = function(evt) { ... };
})();

You need to manually put them in the global scope:

window.onTemplateLoad = (experienceID) -> ...
window.onTemplateReady = (evt) -> ...

or, if you're sure they're at the top level within their .coffee file:

@onTemplateLoad = (experienceID) -> ...
@onTemplateReady = (evt) -> ...