如何在之前和之后检查HTML5视频时间更新?

时间:2018-06-17 03:36:29

标签: javascript html5-video

我正在尝试检查HTML5中视频的当前播放时间。我目前正在使用seeking事件来检查当前播放时间的变化。但是我想知道时间的变化是什么时间以及手头的时间。

如果有人无法正确理解问题,请在下方发表评论。

我的代码:

<html>
<body>

<video id="myVideo" width="320" height="176" controls>
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>

<p>Playback position NOW: <span id="pos1"></span> | This should show the duration the video is at after 'seeking' event</p>
<p>Playback position BEFORE: <span id="pos2"></span> | This should show the duration the video was at after 'seeking' event</p>

<script>
  var vid = document.getElementById("myVideo");
  vid.addEventListener("seeking", function(){before(vid.currentTime);});
  vid.addEventListener('seeked', after);

  function before(time)
  {
     document.getElementById("pos1").innerHTML = time;
  }
  function after()
  {
     document.getElementById("pos2").innerHTML = vid.currentTime;
  }
</script>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

我建议同时查看seekingseeked事件。也许通过在您开始寻找时找到currentTime然后在seeked被触发时再次找到它,您可以输出这两个。