Integrate Brightcove player in Angular

Question

I have to integrate the Brightcove player in an angular modal window.

This is the object code that I would normally put in, say, a jQuery modal to show a video:

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

Please note the call to the Brightcove function on the last line and the {{screencast.brightcove_id}}(EDIT: now screencast.brightcove_id, without curly brackets) reference inside the object. I tried putting this code as it is in Angular, and referencing Brightcove.js in the head, before Angular (or after, it didn't make a difference), but it doesn't work. It throws an error:

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

This is obviously not the Angular way to do things, but I was unable to find information about integrating other Javascript tools in Angular. How do you do it?

EDIT: using screencast.brightcove_id in place of {{screencast.brightcove_id}} got rid of the error message. However the substitution of the angular binding doesn't happen, and brightcove is sent looking for a video that has id "screencast.brightcove_id". Inserting a correct id manually the plugin works, but I need angular to populate that field.

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

Added the example on plunker, please read the edits, there is progress. — arden

AbeEstrada AbeEstrada · Accepted Answer · 2013-10-11T01:59:14

You can use this directive

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();
      });
    }
  };
});

And this on the template:

<div class="brightcove" video-id="{{ video.id }}"></div>

And include in your index.html :

    <script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>

Integrate Brightcove player in Angular

1 Answers