angular.module('plunker', []);
angular.module('plunker').directive('vidplayer', function ($timeout, $log) {



        return {
            restrict: 'EC',
            scope: {
                id: '@',
                canDownloadProxy: '@',
                index: '<'
            },
            template: function (scope, element, attrs) {
                return '\
                    <div class="videoContainer"> \
                            <video class="vidPadding" \
                            data-account="5021452992001" \
                            data-player="BJdbWFceb" \
                            data-embed="default" \
                            data-application-id \
                            class="video-js" \
                            controls \
                            style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"> \
                            </video> \
                        </div> \
                    </div>';
            },
            //ng-if="playlist.length>1"
            link: function (scope, element, attrs) {


                var pid = "bcplayer-" + attrs.id;
                scope.pid = pid;
                scope.paddingTop = (false) ? "75%" : "56.25%";
                scope.index = 0;

                // the templated element is only available after render
                // http://stackoverflow.com/questions/11125078/is-there-a-post-render-callback-for-angular-js-directive
                $timeout(function () {
                    bc(document.getElementById(pid), {
                        //fluid: true
                        plugins: {
                        }

                    });
                    videojs(pid).ready(function () {
                        var myPlayer = this;
                        
                        // dynamically loaded video cloud managed asset
                        //myPlayer.catalog.getVideo('5438790014001', function (error, video) {
                        myPlayer.catalog.getVideo('5112360897001', function (error, video) {
                               //deal with error
                              myPlayer.catalog.load(video);
                          });


                        videojs.plugin('drmCheck',function(){
        var _player = this;
    
        // Util functions
        var config = [{
          "initDataTypes": ["cenc"],
          "audioCapabilities": [{
            "contentType": "audio/mp4;codecs=\"mp4a.40.2\""
          }],
          "videoCapabilities": [{
            "contentType": "video/mp4;codecs=\"avc1.42E01E\""
          }]
        }];
    
        var _checkWidevine = function() {
          try {
            navigator.
            requestMediaKeySystemAccess("com.widevine.alpha", config).
            then(function(mediaKeySystemAccess) {
              videojs.log("Check DRM RESULT --- DRM support with native Widevine");
              return;
            }).catch(function(e) {
              _checkPlayReady();
            });
          } catch (e) {
            _checkPlayReady();
          }
        }
    
        var _checkPlayReady = function() {
          try {
            navigator.
            requestMediaKeySystemAccess("com.microsoft.playready", config).
            then(function(mediaKeySystemAccess) {
              videojs.log("Check DRM RESULT --- DRM support with native PlayReady");
              return;
            }).catch(function(e) {
              videojs.log("Check DRM RESULT --- EME but no DRM support");
              return;
            });
          } catch (e) {
            videojs.log("Check DRM RESULT --- EME but no DRM support");
            return;
          }
        }
    
        // First, test the browser
        if(videojs.IS_IOS) {
          videojs.log("Check DRM RESULT --- DRM won't work on iOS");
          return;
        }
        // Do we have native EME/DRM support?
        if( ("MediaKeys" in window || "WebKitMediaKeys" in window || "MSMediaKeys" in window) && "requestMediaKeySystemAccess" in window.navigator ) {
          // continue
          _checkWidevine();
          return;
    
        } else {
          // give the silverlight tech a bit of time to load
          window.setTimeout(function(){
            if(_player.techName_==="Silverlight") {
              if(_player.tech_.el_.nodeName.toLowerCase()==="object") {
                videojs.log("Check DRM RESULT --- DRM available via silverlight");
              } else if(_player.tech_.el_.nodeName.toLowerCase()==="a") {
                videojs.log("Check DRM RESULT --- DRM available if user installs silverlight");
              } else {
                videojs.log("Check DRM RESULT --- Silverlight tech not working as expected");
              }
            } else if(_player.tech_.el_.nodeName.toLowerCase()==="video") {
              videojs.log("Check DRM RESULT --- Native Video playback (FairPlay HLS?)");
            } else {
              videojs.log("Check DRM RESULT --- Unknown DRM support");
            }
          },1000);
    
        }
    
      });
                        

                        scope.$on('$destroy', function () {
                            videojs(pid).dispose();
                            videojs.off('play', onPlay);
                        });
                        myPlayer.drmCheck();

                  });
                });

            }
        }
    });

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="angular.js@1.5.11" data-semver="1.5.11" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
    <script src='https://players.brightcove.net/5021452992001/BJdbWFceb_default/index.js'></script>
    
    <link rel="stylesheet" href="style3.css" />
    
    <script>document.write("<base href=\"" + document.location + "\" />");</script>
    <script src="app.js"></script>
  </head>

  <body>
    <section>
      <vidplayer id="preview-player" can-download-proxy="true"></vidplayer>
    </section>
  </body>

</html>

.vjs-playlist-now-playing:before
{content:'Now Playing';top:0;left:0}

.vjs-playlist-now-playing:before
{content:'Now Paused';top:0;left:0}

.videoContainer {
  display: block; position: relative;
}

.vidPadding{
  padding-top : 56.25%;
}