3

I am trying to implement Videogular in my AngularJS App. The out of the box example works nicely, no issue. But I am unable to ask the player manually to play a different file, instead of the running audio.

Here is my 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>

And this is the controller code:

  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"
          }
        };
      }
    ]

    );

The Service code is given here:

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

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

When I click on Set Value button, I am able to change the value of sharedProperty.data successfully but I don't know how to ask the player to stop the current audio and play the new file instead.

halfer
  • 19,824
  • 17
  • 99
  • 186
AnR
  • 1,809
  • 3
  • 26
  • 45

1 Answers1

7

I'm the creator of Videogular.

If you have set a binding with:

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

You only need to change your controller.config.sources and that's all:

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"
      }
    };
  }
]);

You have an example here: https://github.com/2fdevs/videogular/blob/master/app/scripts/controllers/main.js#L102

elecash
  • 925
  • 7
  • 11
  • Thanks @elecash for your quick response. Though I have managed to work around this but I would check your solution which I am sure would be more professional. Meanwhile can you please also tell me how to auto play the audio once I change the src thru this method. – AnR Feb 13 '15 at 12:37
  • We have a bug in auto-play that we're going to fix very soon, but in case that you're curious you only need to add vg-auto-play="'true'" in your videogular tag. – elecash Feb 16 '15 at 09:32
  • Is there a way to specify the source video files in the HTML directly without doing it in the controller? – osantos Feb 19 '15 at 17:12
  • You can use vg-config attribute for that. Take a look to vgConfig in this migration guide: http://www.videogular.com/tutorials/migration-guide-to-videogular-1-0-0/ – elecash Feb 20 '15 at 09:53