Video.js: get video duration; any function or something else??

[94alireza]

Hi
I need to show video duration somewhere out of the video tag in .
is there any way i can do this?
i include both ".mp4" and ".ogg" formats of video.
I tested some solutions, but they didn't work for "always".
one way that i tested:

var vid = document.getElementById("show-video");
vid.onloadedmetadata = function() {
console.log('metadata loaded!');
var d = Math.floor(vid.duration);
$('#duration').text(d);
};

but with this, some times that i refersh the page, nothing happens. sometimes it shows the correct duration. the problem is for both firefox and chrome.
I guess, the reason that in some tests it doesn't show the duration and doesn't show anything in console, is that firefox or chrome loads the .mp4 format of video and they can't decode the metadata! so nothing happens. but I'm sure my guess is wrong. cause in some refreshes it shows the true duration.
I figured out that in video.js it shows the video duration by default. i just wanted to know is there any function. any way to use "videojs's duration" somewhere else?
any idea?
thanks in advance.

[tjenkinson]

You need to wait for the 'loadedmetadata' event, then the duration should be available.

// assuming you have an instance of videojs stored in 'player'
player.one('loadedmetadata', function() {
var duration = player.duration();
});

On 7 Apr 2015, at 10:57, 94alireza [email protected] wrote:

Hi
I need to show video duration somewhere out of the video tag in .
is there any way i can do this?
i include both ".mp4" and ".ogg" formats of video.
I tested some solutions, but they didn't work for "always".
one way that i tested:

but with this, some times that i refersh the page, nothing happens. sometimes it shows the correct duration. the problem is for both firefox and chrome.
I guess, the reason that in some tests it doesn't show the duration and doesn't show anything in console, is that firefox or chrome loads the .mp4 format of video and they can't decode the metadata! so nothing happens. but I'm sure my guess is wrong. cause in some refreshes it shows the true duration.
I figured out that in video.js it shows the video duration by default. i just wanted to know is there any function. any way to use "videojs's duration" somewhere else?
any idea?
thanks in advance.

—
Reply to this email directly or view it on GitHub.

[tjenkinson]

It doesn't look like your using videojs in your example. You're getting a reference to the video tag directly.

[94alireza]

@tjenkinson thanks for ur reply!
yeah, in my code for "duration" i used video tag directly and i faced problem. that's why i asked here to find a solution using videojs (I am using videojs for showing video)
unfortunatly! I didn't get ur answer. What do you mean by "assuming you have an instance of videojs stored in player"??
I am using videojs in video tag like this: (i can't put "<" and ">" here so omitted "<" and ">")
video id="show-video" class="video-js vjs-default-skin"
controls="controls" preload="auto" autoplay="autoplay" width="720" height="480"
poster=""
data-setup='{}'
So what do you mean by "an instance of videojs stored in player"?
and i tested my guess from your meaning this way and it didn't show duration:
script
var player = $('#show-movie');
player.on('loadedmetadata', function() {
var duration = player.duration();
alert(duration);
});
in console it says "player.duration is not a function".
SORRY I am NEWBIE!
thanks for your answer.

[tjenkinson]

Ok well if you have a look at the api guide it provides more information: https://github.com/videojs/video.js/blob/stable/docs/guides/api.md

You need to get a reference to the player using the id you gave it like this:

var player = videojs('show-video');

Then you'll want to wait for the loadedmetadata event before getting the time, or check if the event has already been thrown and you've missed it, and in that case get the duration straight away.

So something like this:

if (player.readyState() < 1) {
    // do not have metadata yet so loadedmetadata event not fired yet (I presume)
    // wait for loadedmetdata event
    player.one("loadedmetadata", onLoadedMetadata);
}
else {
    // metadata already loaded
    onLoadedMetadata();
}

function onLoadedMetadata() {
    alert(player.duration());
}

I have not tested this but it should work!

[94alireza]

YES! it worked.
thank you very much.

[simlegate]

:+1:

[mpmanwar]

ERROR : VIDEOJS: ERROR: TypeError: this.ytPlayer.getDuration is not a function.
When i am using youtube video in list view above error is showing and video is not playing in list.

[htinlinnag1993]

Hi,
How can I get the duration of a video using video.js after I get a reference to the video player without actually playing the video?

I am doing some kind of data visualization by mapping the timeline and binding the video to some kind of graph. So I need the duration before the player starts playing.

I have tried the above code( waiting for the loadedmetadata event before getting the time ) as you mentioned. The duration on my web app still shows 0 before video starts playing.

Sorry. I am very new to web development. Thank you.