我必须将 Brightcove 播放器集成到 Angular 模态窗口中。
这是我通常会放入的目标代码,比方说,一个 jQuery 模态来显示视频:
<object id="" class="BrightcoveExperience">
<param name="playerID" value="2132538346001" />
<param name="playerKey" value="key_here" />
<param name="dynamicStreaming" value="true" />
<param name="@videoPlayer" value="screencast.brightcove_id" />
<param name="bgcolor" value="#ffffff" />
<param name="width" value="480" />
<param name="height" value="360" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="wmode" value="transparent" />
<param name="seamlessTabbing" value="false" />
</object>
<script type="text/javascript">brightcove.createExperiences();</script>
请注意最后一行对 Brightcove 函数的调用以及对象内部的 {{screencast.brightcove_id}}(编辑:现在是 screencast.brightcove_id,没有大括号)引用。我尝试将此代码按原样放在 Angular 中,并在 Angular 之前(或之后,它没有任何区别)在头部引用 Brightcove.js,但它不起作用。它抛出一个错误:
Cannot read property 'nodeName' of undefined
at hb (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:124:197)
这显然不是 Angular 的做事方式,但我无法找到有关在 Angular 中集成其他 Javascript 工具的信息。你是怎么做到的?
编辑:使用 screencast.brightcove_id 代替 {{screencast.brightcove_id}} 消除了错误消息。但是 Angular 绑定(bind)的替换不会发生,并且会发送 brightcove 以查找 ID 为“screencast.brightcove_id”的视频。手动插入正确的 ID 插件可以工作,但我需要 Angular 来填充该字段。
最佳答案
你可以使用这个指令
yourApp.directive("brightcove", function($timeout) {
return {
restrict: "CA",
replace: true,
transclude: false,
scope: {
videoId: "@"
},
template: '<object id="myExperience{{ videoId }}" class="BrightcoveExperience"">\
<param name="bgcolor" value="#000000">\
<param name="width" value="1024">\
<param name="height" value="575">\
<param name="playerID" value="[ YOUR PLAYER ]">\
<param name="playerKey" value="[ YOUR KEY ]">\
<param name="isVid" value="true">\
<param name="isUI" value="true">\
<param name="dynamicStreaming" value="true">\
<param name="autoStart" value="true">\
<param name="wmode" value="transparent">\
<param name="@videoPlayer" value="{{ videoId }}">\
</object>',
link: function(scope, element, attrs) {
return $timeout(function() {
return brightcove.createExperiences();
});
}
};
});
模板上的这个:
<div class="brightcove" video-id="{{ video.id }}"></div>
并包含在您的 index.html 中:
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
关于javascript - 在 Angular 中集成 Brightcove 播放器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19031269/