Jwplayer with angularjs

Question

我想用幾種方法在我的web應用程序中啓動jwplayer，其中我使用angularjs ..我需要通過file選項文件的動態鏈接。在我的控制，我可以有一個簡單的功能

getVideoStreaming: function(file) { 
    $scope.fileName = file.name; 
    $scope.documentId = document.id; 
    $scope.videoSrc = "http://mywebserver.com/" + $scope.fileName; 
}, 

當我打開的，我想顯示視頻模態按鈕點擊這個函數被調用動態鏈接。

<button data-uk-modal="{target:'#videoPlayer'}" data-ng-click="files.getVideoStreaming(file)"> Open video </button> 

現在的問題..我怎麼能把這個變量傳遞給我的模態？根據該jwplayer基本配置這是我應該做的：

<!-- dialog video --> 
<div id="videoPlayer" class="uk-modal"> 
    <div class="uk-modal-dialog" style="width: 680px!important;"> 
     <a class="uk-modal-close uk-close"></a> 
     <h3 class="uk-panel-title"> 
      <i class="zmdi zmdi-collection-text"></i> 
      {{docName}} 
     </h3> 
     <div id="myElement">Loading the player...</div> 

     <script type="text/javascript"> 
      var playerInstance = jwplayer("myElement"); 
      playerInstance.setup({ 
       file: "http://example.com/uploads/file.mp4", 
       image: "http://example.com/uploads/myPoster.jpg", 
       width: 640, 
       height: 360, 
       title: 'Basic Video Embed', 
       description: 'A video with a basic title and description!' 
      }); 
     </script> 
    </div> 
</div> 

但當然，正如我剛纔所說，我需要file動態。有沒有可能找到解決辦法？

Answer 1

我還沒有嘗試從模式內使用JWPlayer，但我寫的指令應該適合你。如果沒有，那麼也許你可以逆向工程和適應。看看我如何使用ng-src作爲視頻文件，該指令正在觀察一個變化。

ng-jwplayer

或bower install ng-jwplayer --save

然後使用類似：

<jwplayer ng-src="{{ videoSrc }}" 
     player-options="options" 
     player-id="myPlayer1"> 
</jwplayer> 

和移動你的選擇到

... 
$scope.videoSrc = "http://mywebserver.com/" + $scope.fileName; 
$scope.options = { 
    image: "http://example.com/uploads/myPoster.jpg", 
    width: 640, 
    height: 360, 
    title: 'Basic Video Embed', 
    description: 'A video with a basic title and description!' 
} 

該軟件包還使用服務，以確保全球jwplayer做沒有多次實例化。

希望這會有所幫助。