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

327
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 -1 · Answer 4 · 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

9,885
2
27
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

4 Answers4