计算或跟踪HTML5视频的搜索/创建/假脱机/时间

Question

如果用户跳过某些内容，我想测量视频播放过程中的跳过时间。

使用video.currentTime

首先，它看起来非常简单

j

当我在Chrome中执行此操作时，结果为0。 这是为什么？如果你听timeupdate TU它会变得非常明显。 简化顺序：

Listen to seeking and get the currentTime A
Listen to seekend and get the currentTime B

B - A = Seeked Time

我知道我可以玩脏并将当前时间保存在某个地方，但不是以可靠的方式; - ）

使用TimeRanges video.played

我可以使用TimeRanges来计算搜索/跳过的时间量。但问题是：TimeRanges以有序和规范化的形式出现在列表中。因此，如果用户跳出后面，Ranges将合并并命令=＆gt;对于准确跟踪而言不可靠。

是否有一个更简单，更简单的approch我只是看不到？

Answer 1

我是如何解决它的。

我在这里https://stackoverflow.com/a/28038535/2588818使用了一个RingBuffer（大小10），每隔一次更新就推送Math.round(video.currentTime)。 在seekend我在RingBuffer中左转（prev）并获取与当前时间不同的第一个数据。

工作得非常好，可以用来跟踪跳过的时间。

var createRingBuffer = createRingBuffer || function(length) {
  /* https://stackoverflow.com/a/4774081 */
  var pointer = 0, buffer = [];

  return {

    ...

    push : function(item){
      buffer[pointer] = item;
      pointer = (pointer + 1) % length;
      return item;
    },

    ...

    getFirstDifference: function() {
        var last_value = buffer[pointer - 1],
            prev_value;
        for (var i = 1; i <= length; i++) {
            prev_value = buffer[(pointer - i) % length]

            //check for undefined or initialize the buffer beforehand
            if(prev_value === undefined || last_value === prev_value) {

            } else {
                return prev_value;
            }
        }
        return last_value;
    },
    print: function() {
        console.log(JSON.stringify(buffer));
    }
  };
};

...

var seekTimes = createRingBuffer(10);

handleUpdateTime = function() {
    seekTimes.push(Math.round(video.currentTime));
},

handleSeekEnd = function(e) {
    seekTimes.print();
    console.log("%s - %s", seekTimes.getFirstDifference(), Math.round(video.currentTime));
},

...