Jwplayer with angularjs

Question

Я пытаюсь несколькими способами запустить 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 делает не получают инстанцированных несколько раз.

Надеюсь, это поможет.