如何在Videogular中手动更改src文件？

Question

我正在尝试在我的AngularJS应用程序中实现Videogular。开箱即用的例子运行得很好，没有问题。但我无法要求播放器手动播放不同的文件，而不是播放正在播放的音频。

这是我的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;
            }
        };
    });

当我点击设置值按钮时，我能够成功地更改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