1

我必须将 Brightcove 播放器集成到角度模态窗口中。

这是我通常会放入的目标代码，比如说，一个 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}} 摆脱了错误消息。但是，不会发生角度绑定的替换，并且会发送 brightcove 以寻找具有 id “screencast.brightcove_id”的视频。手动插入正确的 id 插件可以工作，但我需要 angular 来填充该字段。

Plunkr：http ://plnkr.co/edit/H78jIrvx2EsxSSVijZMh?p=preview

4

1 回答 1

5

您可以使用此指令

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>
于 2013-10-11T01:59:14.167 回答