javascript - video duration inside a for loop not working -

the code taken following link :https://s3.amazonaws.com/demo.jwplayer.com/text-tracks/chapters.html in code there following:

  function update() {     var p = v.currenttime/v.duration*100;     b.style.background = "linear-gradient(to right, #500 "+p+"%, #000 "+p+"%)";   }    function render() {     var c = v.texttracks[0].cues;     (var i=0; i<c.length; i++) {       var s = document.createelement("span");       s.innerhtml = c[i].text;       s.setattribute('data-start',c[i].starttime);       s.style.width = ((c[i].endtime-c[i].starttime)/888*480-7)+'px';       s.addeventlistener("click",seek);       b.appendchild(s);     }   } 

in render() function. number 888 represent full duration of video. there anyway can retrieve full duration automatically? in update() function there variable v.duration. tried use instead of 888 code still did not work. reason v.duration did not work in render() function? there easy fix?

---------------------[edit]-----------------------

i have noticed v.duration not work in chrome only.. , value of v.duration chrome "nan". things note: using local html files local html videos on computer. using --allow-file-access-from-files when running chrome can load local captions , video.

@cbroe comment made me solve problem: instead of

  v.addeventlistener('click',play,false);   v.addeventlistener('timeupdate',update,false);   t.addeventlistener('loaded',render,false); // bug in ff31 mac: wrong event name   t.addeventlistener('load',render,false); 

use

  v.addeventlistener('click',play,false);   v.addeventlistener('timeupdate',update,false);   t.addeventlistener('loadedmetadata',render,false);