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..

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:

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
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.
Most helpful comment
Yes, I can get the duration, example:
and it logged: