Video.js: Progress bar not updating the current time and remaining time

Created on 20 Dec 2016  路  3Comments  路  Source: videojs/video.js

Hey, I'm using videojs in several pages on my system, but I'm having a issue in one of them.
It has a special use case which first initializes the player, and just after I fetch some data from my API, it loads the sources and plays the video.

In this case, my player stucks in 0:00 and won't update the remaining time as well..

image

It's odd, because in other pages everything works fine.. In this one it doesn't. Even more awkward is that I can succesfully use the timeupdate event and get the currentTime from the player.

I don't know if it helps, but while I was debugging I noticed the "aria-valuenow" is set as NaN:

image

I've checked if it was a file content-type issue, and it's not. What else could I be doing wrong?
I'm not allowed to share the code fully, but here's part of them to help investigating the issue:

var playerOptions = {
      'controls': true,
      'autoplay': false,
      'preload': 'auto',
      'poster': getBanner(courseId)
    };
var playerInstance = (document.querySelector('#course_video'));
$scope.player = videojs(playerInstance, playerOptions);

// This function is called after I fetch data from my API and my client triggers a button in my view
var runVideoSetup = function (videoId, isReply) {
      $scope.player.poster(getThumbnailUrl(videoId));
      $scope.player.src(getVideoSource(videoId, isReply));
      $scope.player.play();
};

I'm using the version 5.14.1

Most helpful comment

Yes, I can get the duration, example:

$scope.player.on('timeupdate', function () {
   console.log('Current time => ' + this.currentTime());
   console.log('Duration => ' + this.duration());
});

and it logged:

Current time => 0.180787
Duration => 37.912
Current time => 0.680061
Duration => 37.912
Current time => 1.179365
Duration => 37.912
Current time => 1.679368
Duration => 37.912
Current time => 2.180272
Duration => 37.912
Current time => 2.243563
Duration => 37.912

All 3 comments

That sounds strange. Is there anything that could be removing event listener(s) on the player? If you add a "timeupdate" listener, you said you get a correct currentTime, but do you get correct duration from the player?

If the duration is reported as zero, that would explain the NaN - because the number there results from dividing the currentTime by the duration.

Yes, I can get the duration, example:

$scope.player.on('timeupdate', function () {
   console.log('Current time => ' + this.currentTime());
   console.log('Duration => ' + this.duration());
});

and it logged:

Current time => 0.180787
Duration => 37.912
Current time => 0.680061
Duration => 37.912
Current time => 1.179365
Duration => 37.912
Current time => 1.679368
Duration => 37.912
Current time => 2.180272
Duration => 37.912
Current time => 2.243563
Duration => 37.912

Just noticed some bad merge got a .off('timeupdate') before the event listener, clearing the progress on the view as well.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

uikoo9 picture uikoo9  路  4Comments

kitsunde picture kitsunde  路  4Comments

shivamg705 picture shivamg705  路  4Comments

onigetoc picture onigetoc  路  4Comments

zhulduz picture zhulduz  路  3Comments