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

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

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

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

解决方法

您可以检查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

,

您可以像其他答案一样监听ended事件，但是可以使用video元素的.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>