时间戳

首页 > 解决方案 > 如何在前后检查 HTML5 视频时间更新？

javascript - 如何在前后检查 HTML5 视频时间更新？

问题描述

我正在尝试检查 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>

标签： javascripthtml5-video

解决方案

我建议同时查看seeking和seeked事件。也许通过找到currentTime你开始寻找的时间然后在seeked被解雇时再次找到它，你可以输出这两个。

推荐阅读