javascript - 保存已播放了多少视频

我目前尝试找出观看和播放了多少视频，并希望在某个时候触发功能。

我发生的问题是我不知道如何跟踪观看了多少内容。例如，如果您观看了30秒并后退10秒钟，那么您实际上观看了30秒而不是20秒，而currentTime将会显示。

const video = document.getElementById("video");
const set = new Set();
const percent = .8;
let toWatch;

function mediaWatched (curr) {
  alert(`${curr}% of media watched`)
}

function handleMetadata(e) {
  toWatch = Math.ceil(video.duration * percent);
  console.log(toWatch, video.duration);
}

function handleTimeupdate (e) {
  set.add(Math.ceil(video.currentTime));
  let watched = Array.from(set).pop();
  if (set.has(toWatch) && watched === toWatch) {
    video.removeEventListener("timeupdate", handleTimeupdate);
    console.log(watched);
    mediaWatched(
      Math.round(watched / Math.ceil(video.duration) * 100)
    );
  }
}

video.addEventListener("loadedmetadata", handleMetadata);

video.addEventListener("timeupdate", handleTimeupdate);

<video width="400" height="300" controls="true" poster="" id="video">
    <source type="video/mp4" src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4" />
</video>

我如何添加这样的行为来触发一个功能，即如果已经观看了至少80％，并且至少已经播放了80％，该功能如何？

非常感谢！

最佳答案

因此，您要说的是，如果用户点击了标记，那么您想做点什么？因此，如果他们在视频播放过程中碰到了80％的时间，那么您想做点什么？如果是这种情况，只需检查每次timeupdate，一旦它们达到标记，就执行一些操作。如果他们越过标记并快退，就没关系了（只要这不是您想要的，请确保不要再次执行操作）。

如果您要说的是，您想检查用户是否已经观看了一段时间，而不是观看了多少视频。然后只需使用setInterval跟踪他们观看了多长时间。

const timer = setInterval(() => {
  videoWatchedFor += 1;

  if (videoWatchedFor === someTime) {
    //doSomething;
  }

}, 1000);

关于javascript - 保存已播放了多少视频，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42322510/