如何检查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>

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

最新更新