Display video duration from videoJS

Question

I am working on an HTML5 video player with jQuery. For now I have my video player working very well but I want to get the variable for the video duration and show/display it in pure HTML page.

So from here you can take more info about this Jquery video player: http://www.videojs.com/docs/api/

I think the variable for video duration is: myPlayer.duration();

How I can display this value in HTML?

Here is my HTML code to display the player:

  <video id="vemvo-player" class="video-js vjs-default-skin" controls autoplay="true" width="950" height="534"
      data-setup="{}">
    <source src="[var.base_url]/uploads/[var.video_play]" type='video/flv' />
  </video>

This is what I have tried to display this variable but it says that it is = "0" when on the video player it says that it's 4min:

  <video id="vemvo-player" class="video-js vjs-default-skin" controls autoplay="true" width="950" height="534"
      data-setup="{}">
    <source src="[var.base_url]/uploads/[var.video_play]" type='video/flv' />
  </video>
<div id="duration"></div>
<script type="text/javascript">
    _V_("vemvo-player").ready(function(){
        var myPlayer = this;
        var howLongIsThis = myPlayer.duration();
        $('#duration').html('Duration: ' + howLongIsThis);
    });
</script>

Where is my mistake?

Can you create a demo of your problem online, maybe on [jsFiddle](http://jsfiddle.net), so we can see it? — andyb, Nov 11 '13 at 17:06
possible duplicate of [How to display Javascript/Jquery value in HTML page? VideoJs Display durration of the video](http://stackoverflow.com/questions/19915141/how-to-display-javascript-jquery-value-in-html-page-videojs-display-durration-o) — P_Enrique, Nov 11 '13 at 21:56
**Exact** duplicate of [How to print one specific Javascript variable in HTML?](http://stackoverflow.com/questions/19910095/how-to-print-one-specific-javascript-variable-in-html). Please avoid asking the same question multiple times. Also see http://stackoverflow.com/questions/19915141/how-to-display-javascript-jquery-value-in-html-page-videojs-display-durration-o — andyb, Nov 12 '13 at 08:55

Preeti Aggarwal · Answer 1 · 2021-09-23T10:49:13.927

You can try this. It works for me.

var myPlayer = videojs('vemvo-player');

    if (myPlayer.readyState() < 1) {
        // wait for loadedmetdata event
        myPlayer.one("loadedmetadata", onLoadedMetadata);
    }
    else {
        // metadata already loaded
        onLoadedMetadata();
    }
    
    function onLoadedMetadata() {
        alert(myPlayer.duration());
        $('#duration').html("Duration: " + myPlayer.duration());
    }

Kaushik Thakkar · Answer 2 · 2019-10-17T04:43:26.283

2

var player = videojs('my-video', {
    fluid:false, // videojs settings
    controls:true,
    height: '300'          
  });
$(document).ready(function(){
  console.log(player.duration()); 
 // will return video duration. Can't be used while page is loading.

  console.log(player.currentTime()); 
 // will return current time if video paused at some time. Intially it would be 0.

});

edited Oct 17 '19 at 04:43

answered Oct 16 '19 at 10:22

Kaushik Thakkar

344
3
10

4

Your answer should have an explanation. – Loolooii Oct 16 '19 at 13:58
Hope those comments will help you. Thank you – Kaushik Thakkar Oct 17 '19 at 04:44

score 0 · Answer 3 · answered Dec 22 '21 at 15:46

Those who might come here and are using videojs with Vue 3, also might work with similar frameworks like React.

Referring to this code and component usage - https://docs.videojs.com/tutorial-vue.html you can do the following changes to get the duration, height, and width.

// New Code here
this.player = videojs(
  this.$refs.videoPlayer,
  this.options,
  function onPlayerReady() {
    console.log("onPlayerReady", this);
  }
);
this.player.one("loadedmetadata", () => {
  var duration = this.player.duration();
  console.log(`Duration of Video ${duration}`);
  console.log(`Original Width of Video ${this.player.videoWidth()}`);
});

score 0 · Answer 4 · answered Sep 18 '22 at 13:04

I was having troubles to get the real duration of videos (using videojs v7.18.*) resulting in bugged custom progressbar! The problem was that player.duration() always returns rounded number while player.liveTracker.seekableEnd() returns the real value but only after start event.

For example, if real duration is 13.456s, these values are returned for videojs player object p:

                            | On ready    | On load | On start
----------------------------|-------------|---------|----------
p.duration()                | 0           | 14      | 14
p.liveTracker.seekableEnd() | 14          | 14      | 13.456

I've ended up with this solution in React:

const onDurationChange = () => {
  const dur = player?.liveTracker.seekableEnd() || player?.duration() || 0;
  setDurationInSec(dur);
}

return <video ref={videoRef} onDurationChange={onDurationChange}>

score -1 · Answer 5 · answered Nov 11 '13 at 16:23

-1

As you're using jQuery, that can be done much easier :) You can use $.html to edit the html contents of a dom element. Your code will look something like this:

<div id="duration"></div>

<script type="text/javascript">
    _V_("vemvo-player").ready(function(){
        var myPlayer = this;
        var howLongIsThis = myPlayer.duration();
        $('#duration').html('Duration: ' + howLongIsThis);
    });
</script>

answered Nov 11 '13 at 16:23

giorgio

10,111
2
28
41

It still says that duration is 0. How i can show the real duration? – user2979725 Nov 11 '13 at 16:26
what do you see in the console when executing logging the `howLongIsThis` var? – giorgio Nov 11 '13 at 16:31
What do you mean in console? I don't get it. – user2979725 Nov 11 '13 at 16:31
Why it sais it's = 0 where is the problem? – user2979725 Nov 11 '13 at 16:38
How i can execute this in console? – user2979725 Nov 11 '13 at 16:47
[What is console.log and how do I use it?](http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it) – giorgio Nov 11 '13 at 16:56
I have used Opera Dragonfly and just typed `howLongIsThis` and i get `Unhandled Error: Undefined variable: howLongIsThis` – user2979725 Nov 11 '13 at 17:01
And when i only place `myPlayer.duration()` its shows = `252.002` and i this is the duration in seconds.. – user2979725 Nov 11 '13 at 17:04
can you update your question with the exact code you have now? – giorgio Nov 11 '13 at 17:13

Display video duration from videoJS

5 Answers5