javascript - 保存视频已播放的时间

Question

我目前尝试找出视频的观看和播放量，并在某个时刻我想触发一个功能。

我遇到的问题是我不知道如何跟踪观看次数。例如，如果您观看了 30 秒并倒带 10 秒，那么您实际上观看了 30 秒，而不是 currentTime 将显示的 20 秒。

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% 已观看并且至少已播放过？

非常感谢!

Answer 1

所以你的意思是，如果用户点击了标记，那么你想做点什么？那么，如果他们完成了视频的 80%，那么您想做点什么吗？如果是这种情况，只需检查每次更新，一旦到达标记就执行某些操作。如果他们越过了标记并倒带，那也没关系(只要确保防止再次执行您的操作，如果这不是您想要的。)

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

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

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

}, 1000);