How to display Javascript/Jquery value in HTML page? VideoJs Display durration of the video

Question

Hi there i am currently working on HTML5 Jquery video player. Here you can get more info about this HTML video player: http://www.videojs.com/docs/api/

From this link you can see that myPlayer.duration() is the function that must show the video durration in seconds. And that's it i just want to display this value in simple HTML page like i am trying with my code.

This is my code:

 <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
  <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">
        var myPlayer = _V_("vemvo-player");
    _V_("vemvo-player").ready(function(){
        var howLongIsThis = myPlayer.duration();
        $('#duration').html('Duration: ' + howLongIsThis);
    });
</script>

The problem with this code is that it's showing Duration: 0 when the video duration is far from 0.

My video player is working okey and it's showing durration of the video correctly. My question is how i can show this durration in HTML page value?

With the code above when i post var myPlayer = _V_("vemvo-player"); into _V_("vemvo-player").ready(function(){ function and i try in the console to run myPlayer.duration() it gives me error for Undefined variable, but when var myPlayer = _V_("vemvo-player"); is outside the function like it is in my post and i type myPlayer.duration() in the console it's giving me the durration in seconds like i need it.

The problem is that i can display this variable as a number in HTML page. I just want to display this number in HTML page.

Where is the mistake in my code and how i can fix it?

Thanks in advance!

It sounds like you're actually asking how to run that code again after the video loads. — SLaks
– SLaks, Commented Nov 11, 2013 at 20:21
I don't know if that is needed to show the duration? How i can display that duration? — user2979725
– user2979725, Commented Nov 11, 2013 at 20:26
Similar question: stackoverflow.com/questions/2221029/… You probably don't have the metadata yet so that function will always give 0. Note: the answer below the accepted one is probably what you want. — Robb
– Robb, Commented Nov 11, 2013 at 20:26
So what i must change in my code to make it work and how it will look like? — user2979725
– user2979725, Commented Nov 11, 2013 at 20:30
Exact duplicate of How to print one specific Javascript variable in HTML? — andyb
– andyb, Commented Nov 12, 2013 at 8:57

Community · Accepted Answer · 2017-05-23 11:50:08Z

2

<script type="text/javascript">
var myPlayer = _V_("vemvo-player");
_V_("vemvo-player").ready(function(){
   // Any ready/init code you want here
   $('#duration').html('Duration: ');        
});
myPlayer.addEventListener('loadedmetadata', function() {
    $('#duration').html('Duration: ' + myPlayer.duration);
});
</script>

Source

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Nov 11, 2013 at 20:32

Robb

2,6964 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2979725 Over a year ago

How i can make this whole script work so the Duration will be shown?

user2979725 Over a year ago

I have replaced with your updated code but it's still not working. Now it's even not showing Duration: text.

user2979725 Over a year ago

Thank you mate, but it's still NOT working. Now the result is only Duration: and not displaying any value after it..

Robb Over a year ago

You should be able to get it to work with the addEventListener it just might take some work because I don't have your code base I can't debug. Good luck

P_Enrique Over a year ago

The code in the answer is "listening" to myPlayer for an event called loadedmetadata, gets the myPlayer.duration value and then puts the number in the HTML.

|

Steve · Accepted Answer · 2013-11-11 20:27:26Z

0

Have you tried to keep the variable declaration outside the function, but the assignment inside?

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

answered Nov 11, 2013 at 20:27

Steve

8,6487 gold badges42 silver badges54 bronze badges

1 Comment

user2979725 Over a year ago

It still says: Duration: 0

Collectives™ on Stack Overflow

How to display Javascript/Jquery value in HTML page? VideoJs Display durration of the video

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related