html 5 视频跟踪百分比

Question

如何跟踪视频观看或未观看的状态

如果我在 60% 后这样写，我可以发送 ajax 调用并将状态更新为已观看 60%

var i=0;
$("#video").bind("timeupdate", function(){
var currentTime = this.currentTime;
if(currentTime > 0.66*(this.duration)) {
    if(i<1) {
        /* Watched 66% ajax call will be here*/
    }
    i=i+1; //Reset for duplicates
}
});

相似地。如果我在 100% 之后这样写，我可以发送 ajax 调用并将状态更新为完全观看 100%

$("#video").bind("ended", function() {
    if(j<1) {
        /* Watched 100% Finished */  
    }
    j=j+1; //Reset for duplicates
});

但是，当有人将视频转发到 90% 并从那里开始播放时，也会触发 100% ajax 调用，所以在这种情况下我应该使用什么逻辑将状态更新为未观看。

Answer 1

像这样操作函数怎么样

var watchPoints = [];

$("#video").bind("timeupdate", function(){
var currentTime = this.currentTime;
var watchPoint = Math.floor((currentTime/this.duration) * 100);
if(watchPoints.indexOf(watchPoint) == -1){
  watchPoints.push(Math.floor(watchPoint))
}
});

/* Assuming that this will be called regardless of whether the user watches till the end point */
$("#video").bind("ended", function() {
   /* use the watchPoints array to do the analysis(ordered array)
   Eg.1 [1,2,3,4,5....100] - length is 100
      2.[90,91..100]  - length is only 10 and the starting point is 90
      3.[1,2,3,4,5,50,51,52,61,62,63,64,65,66,67,68,69,70,98,99,100] - length is 21 and the index of 66 is 13 which clearly tells the user has skipped most of the parts
   */
});