如何手动更改 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