CODEWITHSUNDEEP
angularjsvideogular
Asif Iqbal
Asif Iqbal

Reputation: 543

How to fetch the curent time in videogular on ng-click

On ng-click call publishBookmark scope object.On html page rendering it has a video tag,so catching the video tag and trying to get the current time location when i click the button but alway gets "0" as alert message.

<button class="btn-default" type="button" data-ng-click="publishBookmark()">
</button>

$scope.publishBookmark = function () {
    var location = document.getElementsByTagName("video").currentTime;
    alert(location);
};

<!--Videogular COntainer Starts  -->
<div ng-controller="videogularController as controller" class="videogular- player">
<videogular vg-theme="controller.config.theme.url"
vg-auto-play="controller.config.plugins.controls.autoPlay">
<vg-media vg-src="controller.config.sources"
vg-native-controls="false">
</vg-media>
<vg-controls vg-autohide="controller.config.plugins.controls.autoHide" 
vg-autohide-time="controller.config.plugins.controls.autoHideTime">
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ API.currentTime | date:'mm:ss':'+0000' }}</vg-time- display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ API.totalTime | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-playback-button></vg-playback-button>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
</videogular>
<!-- Videogular Container Ends -->

alert always shows 0 as default. New to angular JS ,need help. Thanks.

Upvotes: 1

Views: 2621

Answers (1)

elecash
elecash

Reputation: 925

In your HTML add a callback to listen update time in your controller:

<videogular vg-update-time="ctrl.onUpdateTime($currentTime, $duration)">
    <!-- videogular plugins and other stuff -->
</videogular>

In your controller get the current time:

    this.onUpdateTime = function (currentTime, totalTime) {
        this.currentTime = currentTime;
        this.totalTime = totalTime;
    };

I recommend you to take a look to the demo:

It will show you how to use all the Videogular features. Specially main.js file.

Upvotes: 2

Related Questions