Question

代码取自以下链接：https://s3.amazonaws.com/demo.jwplayer.com/text-tracks/chapters.html 在代码中有以下内容：

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

render()函数中的

。数字888表示视频的完整持续时间。无论如何我可以自动检索完整的持续时间吗？在update()函数中有一个变量v.duration。我尝试使用它而不是888但代码仍然无效。 v.duration在render()函数中不起作用的原因是什么？有一个简单的解决方法吗？

--------------------- [编辑] -----------------------

我注意到v.duration仅在Chrome中不起作用。来自Chrome的v.duration的值是＆＃34; NaN＆＃34;。注意事项：我在我的计算机上使用带有本地HTML视频的本地HTML文件。我在运行chrome时使用--allow-file-access-from-files，因此我可以加载本地标题和视频。

Answer 1

@CBroe评论让我解决了这个问题：而不是

  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);

使用

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

for循环中的视频持续时间不起作用

1 个答案: