Интеграция плеера Brightcove в Angular

Мне нужно интегрировать плеер 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}}(EDIT: теперь screencast.brightcove_id, без фигурных скобок) внутри объекта. Я попытался поместить этот код как есть в Angular и сослаться на Brightcove.js в голове до Angular (или после, это не имело значения), но это не сработало. Выдает ошибку:

Cannot read property 'nodeName' of undefined
at hb (https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:124:197)

Очевидно, что это не способ работы с Angular, но мне не удалось найти информацию об интеграции других инструментов Javascript в Angular. Как ты это делаешь?

EDIT: использование screencast.brightcove_id вместо {{screencast.brightcove_id}} избавило от сообщения об ошибке. Однако подстановки угловой привязки не происходит, и Brightcove отправляется на поиск видео с id "screencast.brightcove_id". Вставив правильный идентификатор вручную, плагин работает, но мне нужно, чтобы angular заполнил это поле.

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


javascript angularjs brightcove
person arden    schedule 26.09.2013    source источник
comment
Вы можете предоставить демонстрационный пример на plnkr.co/edit?   -  person mrzmyr    schedule 26.09.2013
comment
Добавил пример на plunker, читайте правки, прогресс есть.   -  person arden    schedule 27.09.2013

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать эту директиву

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>
person AbeEstrada    schedule 11.10.2013
comment
Разве шаблон не будет выглядеть примерно так: ‹brightcove video-id={{ video.id }}›‹/brightcove› - person bill m; 30.09.2014