如何检查用户在 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 有用的链接 Whosebug, MDN

Answer 2

您可以像其他答案一样收听 ended 事件，而是使用视频元素的 .played 属性，它具有用户播放的时间范围，所以每当用户跳过一些内容时，它都会推送一个新的时间范围，但如果用户已经观看了整个视频，那么它只保留一个时间范围，它将是第一个 ("index 0")，所以重点是减去从结束时间开始的时间，如果它等于视频的持续时间，那么用户已经完整地观看了视频，否则跳过了一些部分，这里是一个活生生的例子

document.querySelector("video").onended = function() {
  if(this.played.end(0) - this.played.start(0) === this.duration) {
    console.log("Played all");
  }else {
    console.log("Some parts were skipped");
  }
}

<video src="https://res.cloudinary.com/saymoinsam/video/upload/v1541676544/ABeautifulMind.mp4" controls width="300" height="200"></video>

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

How to check a user watched the full video in html5 video player without skipping any portion?

javascript

video

video-streaming

html5-video