javascript - 使用 Brightcove 播放器和外部 JS

Question

我很难让 Brightcove Smart Player API 处理任何外部 JS 文件。我在 index.html 中调用标准 API 方法(例如 onTemplateLoad 和 onTemplateReady)没有任何问题，但是一旦它们移出到外部的 CoffeeScript，我什么也没得到:( BrightCove 的所有 API 文档都使用内部 javascript。

BrightCoveExperiences.js 包含在 HTML 正文中，位于播放器 div 旁边。

我的 JS 加载顺序是这样的(在 Jade 中)，其中 beast.js 是 cargo :

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

在 beast.js 中，我注入(inject)以下内容:

<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">

理论上，应该调用 onTemplateReady 和 onTemplateLoad 函数:

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'

但是唉...我还应该提一下，我不是 BrightCove 的粉丝。

谢谢

詹姆斯

Answer 1

CoffeeScript 将编译后的 JavaScript 包装在 self-invoking function 中避免污染全局命名空间:

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.

这意味着你的两个函数

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

不是全局可用的，它们是这样隐藏的:

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

您需要手动将它们放入全局范围:

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

或者，如果您确定它们位于 .coffee 文件中的顶层:

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