在Angle中集成Brightcove播放器

我必須將Brightcove播放器集成到角度模式窗口中。在Angle中集成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的功能，在最後一行和{{截屏.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)

這顯然不是做事情的角度的方式，但我無法找到有關角整合其他的JavaScript工具的信息。你怎麼做呢？

編輯：使用screencast.brightcove_id代替{{screencast.brightcove_id}}擺脫了錯誤信息。然而，不會發生角度綁定的替換，並且發送brightcove以查找ID爲「screencast.brightcove_id」的視頻。手動插入正確的ID插件工作，但我需要棱角填充該字段。

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

來源

2013-09-26 darioshanghai

你能提供嗎？ e http://plnkr.co/edit/上的演示案例？ – mrzmyr

在plunker上增加了這個例子，請閱讀編輯，有進展。 – darioshanghai

您可以使用該模板這個指令

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-11 01:59:14 AbeEstrada

模板看起來不是這樣的： –

yes如果你改變了：restrict：「CAE」 – benek

在Angle中集成Brightcove播放器

回答

相關問題