如何检查用户在 html5 视频播放器中观看了完整视频而不跳过任何部分？

Question

我们正在开展一个内容为视频的教育项目。有谁知道我们如何检查视频是否已完全观看而不跳过任何部分？我们正在使用 html5 视频播放器：

<video width="480" height="400" controls="true" poster="">
    <source type="video/mp4" src="video.mp4"></source>
</video>

Answer 1

您可以检查html5中的视频事件，您需要的是ended检查视频是否结束的事件，以及timeupdate检查用户是否跳过某些部分的事件。

这是一个关于什么可行的最小示例，您可以获取该skip对象并将其附加到用户，并用它进行一些分析。

const $video = document.querySelector("video");

const onTimeUpdate = event => {
    console.log(checkSkipped(event.target.currentTime));
}

let prevTime = 0;
const checkSkipped = currentTime => {
  const skip = [];
  // only record when user skip more than 2 seconds
  const skipThreshold = 2;
  
  // user skipped part of the video
  if (currentTime - prevTime > skipThreshold) {
    skip.push({
      periodSkipped: currentTime - prevTime,
      startAt: prevTime,
      endAt: currentTime,
    });
    prevTime = currentTime;
    return skip;
  }
  
  prevTime = currentTime;
  return false;
}

$video.addEventListener("play", e => console.log('play'));
$video.addEventListener("playing", e => console.log('playing'));

$video.addEventListener("timeupdate", onTimeUpdate);

$video.addEventListener("ended", e => console.log('ended'));
$video.addEventListener("pause", e => console.log('pause'));

这是一个代码片段：jsfiddle 有用链接Stackoverflow、MDN