如何解决如何检查用户在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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。