CODEWITHSUNDEEP
javascriptvideo.js
brendosthoughts
brendosthoughts

Reputation: 1703

using the video.js api duration call returns 0 while video is much longer

okay So I'm trying to leverage the video.js project as it's seems pretty amazing! anyways, im writing my first script that interacts with the api which can be found below. it's basically just supposed to output the current play time to the div current_time , the id of video tag is my_stream anyways here's all my javascript ... the problem im having is playLength=0 and current time never updates when video is playing and remains at 0 (ie. is never more then 0 ) im not sure what im doing wrong here ... the api rules i followed can also be found here video.js api docs

function current_time(){
 _V_("my_stream").ready(function(){

 var myPlayer = this;

 // EXAMPLE:

 var playLength = myPlayer.duration();

 do
   {
    var position = myPlayer.currentTime();
    var myTextArea = document.getElementById('time_count');
    myTextArea.innerHTML = position;
   }
   while(position < playLength);


  });

 }

window.onload = current_time

anyhelp from any one who's implemented anything with the api or just see something dumb i've done would be greatly appreciated, thanks!

Upvotes: 4

Views: 8896

Answers (2)

misterben
misterben

Reputation: 7821

You're assigning the duration to playLength before playback begins. If that's zero when you assign it, it will remain zero. Check the note in the API doc "NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing."

It looks like you're only concerned about the duration to work out when the video is playing. It would be far better just to use the timeupdate event instead.

var myPlayer;
var myTextArea = document.getElementById('time_count');

videojs('my_stream').ready(function(){
  myPlayer = this;
  myPlayer.addEvent('timeupdate', onProgress);
});

function onProgress() {
  myTextArea.innerHTML = myPlayer.currentTime();
}

This should execute after the DOM has loaded (with window.onload, or jQuery's $(document).ready()), or go in a script tag in the body after the video and #time_count elements.

Upvotes: 4

brendosthoughts
brendosthoughts

Reputation: 1703

I Have sort-of solved this problem bymyself by modifying the code I Had written so it now works like so

function current_time(){
_V_("my_stream").ready(function(){
  var myPlayer = this;
  var playLength = myPlayer.duration();
  var position = myPlayer.currentTime();
  var myTextArea = document.getElementById('time_count');
  myTextArea.innerHTML = position + "/" + playLength;
  t=setTimeout(function() {current_time()},2000);
});
}

... although it seems stupid to poll duration continuosly, I actually don't need this value going forward in development, however both populate properly now once the video is playing so it's kinda a solution. I'm not going to except my own answer right away to see if anyone can solve this a better way, or if you can explain why video.js changes the id tag and how to properly deal with it i'll give you an up vote and accept your answer if it all makes sense to me.

Upvotes: 0

Related Questions