Asif Iqbal
Asif Iqbal

Reputation: 543

Videogular displays incorrect start time and end time for a video

Why videogular is not displaying the correct start time for the video?For all video it starts from 30:00 which shud be 00:00 and start incrementing as video plays.

<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>{{ totalTime | date:'mm:ss' }}</vg-time-display>
        <vg-volume>
            <vg-mute-button></vg-mute-button>
            <vg-volume-bar></vg-volume-bar>
        </vg-volume>
        <vg-fullscreen-button></vg-fullscreen-button>
    </vg-controls>

Here in the image you can see the video is of 62mins but total time shown is 2 mins and current time it is showing 30:12 but only 00:12ss is only played. enter image description here

Any suggections to achieve this ?Thanks

Upvotes: 2

Views: 1544

Answers (3)

Sukesh Chand
Sukesh Chand

Reputation: 3047

Create a function which returns the time in readable format and use that function in vg-time-display tag

html

<vg-time-display>{{ getTimeString(currentTime) }}</vg-time-display>

angular function

$scope.getTimeString = function (duration ){
        var seconds = Math.floor((duration / 1000) % 60),
            minutes = Math.floor((duration / (1000 * 60)) % 60),
            hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
        hours = (hours < 10) ? "0" + hours : hours;
        minutes = (minutes < 10) ? "0" + minutes : minutes;
        seconds = (seconds < 10) ? "0" + seconds : seconds;
        var timeInString;
        if (hours > 0) {
            timeInString = hours + ":" + minutes + ":" + seconds;
        } else {
            timeInString = minutes + ":" + seconds;
        }
        return timeInString;
    }

Upvotes: 0

Govan
Govan

Reputation: 7781

Use 'UTC' filter

<vg-time-display>{{ currentTime | date:'mm:ss':'UTC' }}</vg-time-display>

This ll work for all timezones.

Upvotes: 2

elecash
elecash

Reputation: 925

Videogular is using the date filter.

You need to add the timezone and that's all.

<vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>

Upvotes: 1

Related Questions