Videogular - Как вручную изменить файл Src

Question

Я пытаюсь реализовать Videogular в своем приложении AngularJS. Выбранный из примера пример хорошо работает, без проблем. Но я не могу попросить игрока вручную воспроизвести другой файл, а не работать с аудио. Может кто-то, пожалуйста, помогите, как это сделать. Вот мой HTML.

<div ng-controller="HomeCtrl as controller" class="videogular-container" ng-model="sharedProperty"> 
    sharedProperty.data = {{sharedProperty.data}} 
    <button ng-click="SetValue('http://example.com/myfile.mp3')" type="button" class="btn btn-default">Change Audio</button> 
    <videogular vg-theme="controller.config.theme.url" class="videogular-container audio"> 
    <vg-media vg-src="controller.config.sources"></vg-media> 

    <vg-controls> 
     <vg-play-pause-button></vg-play-pause-button> 
     <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display> 
     <vg-scrub-bar> 
     <vg-scrub-bar-current-time></vg-scrub-bar-current-time> 
     </vg-scrub-bar> 
     <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display> 
     <vg-volume> 
     <vg-mute-button></vg-mute-button> 
     </vg-volume> 
    </vg-controls> 
    </videogular> 
</div> 

И это код контроллера:

app.controller('HomeCtrl', ["$sce","$scope", "$window", "sharedProperties", 
     function($sce, $scope, $window, sharedProperties) { 

     $scope.sharedProperty = sharedProperties.getProperty(); 
     $scope.SetValue = function (msg) 
     { 
      $window.alert($scope.sharedProperty.data); 
      $scope.setProperty = sharedProperties.setProperty; 
      $scope.setProperty(msg); 
      $window.alert($scope.sharedProperty.data); 
     } 

     $window.alert($scope.sharedProperty.data); 

     this.config = { 
      sources: [{ 
      src: $sce.trustAsResourceUrl($scope.sharedProperty.data), 
      type: "audio/mpeg" 
      }, { 
      src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/audios/videogular.ogg"), 
      type: "audio/ogg" 
      }], 
      theme: { 
      url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
      } 
     }; 
     } 
    ] 

    ); 

код Услуга предоставляется здесь:

app.service('sharedProperties', function() { 
     var property = { 
      data: "http://example.com/firstaudio.mp3" 
     }; 

     return { 
      getProperty:function() { 
       return property; 
      }, 
      setProperty:function (value) { 
       property.data = value; 
      } 
     }; 
    }); 

При нажатии на кнопку Set Value, я могу изменить значение из sharedProperty.data, но я не знаю, как попросить игрока остановить текущий звук и воспроизвести новый файл.

Заранее благодарен!

Answer 1

Я являюсь создателем Videogular.

Если вы установили связывание с:

<vg-media vg-src="controller.config.sources"></vg-media> 

Вам нужно только изменить controller.config.sources и все:

app.controller('HomeCtrl', ["$sce","$scope", "$window", "sharedProperties", 
    function($sce, $scope, $window, sharedProperties) { 

    $scope.sharedProperty = sharedProperties.getProperty(); 
    $scope.SetValue = function (msg) 
    { 
     $window.alert($scope.sharedProperty.data); 
     $scope.setProperty = sharedProperties.setProperty; 
     $scope.setProperty(msg); 
     $window.alert($scope.sharedProperty.data); 
    } 

    $scope.changeSource = function (source) { 
      // source should be an array of objects with src and type 
      this.config.sources = source; 
    } 

    $window.alert($scope.sharedProperty.data); 

    this.config = { 
     sources: [{ 
     src: $sce.trustAsResourceUrl($scope.sharedProperty.data), 
     type: "audio/mpeg" 
     }, { 
     src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/audios/videogular.ogg"), 
     type: "audio/ogg" 
     }], 
     theme: { 
     url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" 
     } 
    }; 
    } 
]); 

Вы здесь пример: https://github.com/2fdevs/videogular/blob/master/app/scripts/controllers/main.js#L102