CODEWITHSUNDEEP
javascriptangularjsangularjs-directivevideogular
bobber205
bobber205

Reputation: 13372

Interacting With the Videogular Directive -- How To Do So?

I'm using https://github.com/2fdevs/videogular and out of the box it works quite well, specifically.

<videogular vg-width="videoWidth" vg-height="videoHeight" >
    <video class='videoPlayer' ng-model="currentVideo">
        <source ng-src='{{currentVideo.videoLocation}}' test="{{currentVideo}}" type='video/ogg'></source>
    </video>
</videogular>

I'm unsure how I would, say since autoplay isn't true, get the video to play programmatically? I know I could inside my controller that contains the above markup, call angular.element() then call .play() but from what I've read that seems wrong. That I shouldn't be calling angular.element() inside any controller.

What should I do? Should I create a directive that does this? Where is the best place to put the logic for "playing" and "pausing" a video (fwi, I want to have two videos on screen and once the first is over, do a few things then play the second).

Upvotes: 2

Views: 2976

Answers (1)

elecash
elecash

Reputation: 925

Yesterday we've exposed the API to be accesible through $scope, so you could access all methods available.

You could check the API here.

This release is not yet available through bower, we're planning to do that this weekend.

UPDATE

The best way to know when a video have been completed is to add a scope function in your controller.

$scope.onCompletePlayer1 = function() {
    console.log("on complete 1");
};

$scope.onCompletePlayer2 = function() {
    console.log("on complete 2");
};

Then add in your HTML those functions in your videogular directives.

<videogular vg-complete="onCompletePlayer1()" ...></videogular>
<videogular vg-complete="onCompletePlayer2()" ...></videogular>

And finally add vg-complete as a $scope function in videogular.js:

\\Line 159
vgComplete: "&" 

\\Line 507
$scope.onComplete = function(event) {
    vg.setState(VG_STATES.STOP);
    $scope.$emit(VG_EVENTS.ON_COMPLETE);
    $scope.vgComplete();
    $scope.$apply();
};

We will try to add this in the next release, so maybe you want to wait a couple of days.

Upvotes: 2

Related Questions