0

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!

user2979725
  • 41
  • 2
  • 2
  • 6
  • It sounds like you're actually asking how to run that code again after the video loads. – SLaks Nov 11 '13 at 20:21
  • I don't know if that is needed to show the duration? How i can display that duration? – user2979725 Nov 11 '13 at 20:26
  • Similar question: http://stackoverflow.com/questions/2221029/problem-retrieving-html5-video-duration 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 Nov 11 '13 at 20:26
  • So what i must change in my code to make it work and how it will look like? – user2979725 Nov 11 '13 at 20:30
  • **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) – andyb Nov 12 '13 at 08:57

2 Answers2

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

Community
  • 1
  • 1
Robb
  • 2,666
  • 4
  • 20
  • 24
  • How i can make this whole script work so the Duration will be shown? – user2979725 Nov 11 '13 at 20:35
  • I have replaced with your updated code but it's still not working. Now it's even not showing `Duration:` text. – user2979725 Nov 11 '13 at 20:39
  • Thank you mate, but it's still NOT working. Now the result is only `Duration:` and not displaying any value after it.. – user2979725 Nov 11 '13 at 20:47
  • 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 – Robb Nov 11 '13 at 20:49
  • 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. – P_Enrique Nov 11 '13 at 21:04
  • I have tried this code from the answer but it's not working. So what i have to do? Mate you are awesome! – user2979725 Nov 11 '13 at 21:12
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>
Steve
  • 8,609
  • 6
  • 40
  • 54