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?

Answer 1

You can try this. It worked 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());
    }

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

});

Answer 3

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>

Answer 4

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

Answer 5

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