如何使用js跟踪<video>播放时间？

Question

我需要跟踪视频播放时间，因此在3秒后我需要在其上显示文字。谢谢你的帮助！

Answer 1

假设你有这个HTML：

<video id="myvideo" controls>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<div id="video_counter"></div>

您可以使用此JavaScript来跟踪播放时间：

var videoElement = document.getElementById("myvideo");
var totalTimePlayed = 0;
var lastUpdatedTime = 0;
videoElement.addEventListener("timeupdate", function(event) {
  var newTime = videoElement.currentTime;
  var timeDiff = newTime - lastUpdatedTime;
  if (timeDiff > 0) {
    totalTimePlayed += timeDiff;
    // feel free to do something else here
    document.getElementById("video_counter").innerText = totalTimePlayed + " seconds played.";
  }
  lastUpdatedTime = newTime;
});

这会增加totalTimePlayed变量中以秒为单位的时间，并避免在用户向后搜索时减去时间（但如果用户向前搜索，则不会避免过多的时间跟踪）。

此处它正在codepen中运行。