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?

Solution 1

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());
    }

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

});

Comments

[user2979725]

It still says that duration is 0. How i can show the real duration?

[giorgio]

what do you see in the console when executing logging the howLongIsThis var?

[user2979725]

What do you mean in console? I don't get it.

[user2979725]

Why it sais it's = 0 where is the problem?

[user2979725]

How i can execute this in console?

[giorgio]

What is console.log and how do I use it?

[user2979725]

I have used Opera Dragonfly and just typed howLongIsThis and i get Unhandled Error: Undefined variable: howLongIsThis

[user2979725]

And when i only place myPlayer.duration() its shows = 252.002 and i this is the duration in seconds..

[giorgio]

can you update your question with the exact code you have now?

[Loolooii]

Your answer should have an explanation.

[Kaushik Thakkar]

Hope those comments will help you. Thank you