Рассчитайте или отследите искомое/намотанное/буферное/время для видео HTML5

я хотел бы измерить пропущенное время во время воспроизведения видео, если пользователь пропустил какое-то время.

Использование video.currentTime

Сначала это выглядит довольно тривиально

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

B - A = Seeked Time

Когда я делаю это в Chrome, результат равен 0. Почему? Если вы послушаете timeupdate TU, это станет совершенно очевидным. Упрощенная последовательность:

Press Play
TU: 1
TU: 2
TU: 3 // now i use the mouse to seek forward to 19
TU: 19
//chrome & ff fire pause in between, ie not
Seek Start: 19
TU: 19
Seek End: 19
TU: 19
//chrome & ff fire play, ie not
TU: 20
...

Я знаю, что могу играть грязно и сохранять текущее время где-нибудь, но ненадежным способом ;-)

Использование TimeRanges video.played

Я могу использовать TimeRanges для расчета количества времени, которое было разыскано/пропущено. Но проблема в том, что TimeRanges приходят в упорядоченной и нормализованной форме в виде списка. Так что, если пользователь прыгает вперед, диапазоны становятся объединенными и упорядоченными => ненадежными для точного отслеживания.

Есть ли более простой и менее сложный подход, который я просто не вижу?


javascript video-player html5-video seek video-tracking
person mons droid    schedule 23.11.2016    source источник
comment
Я думаю об использовании очереди с максимальным количеством элементов 5-10, где я экономлю время. после поиска я прохожу через него и использую первый раз, который отличается в начале времени   -  person mons droid    schedule 23.11.2016

Ответы (1)


arrow_upward
0
arrow_downward

Как я это решил.

Я использовал RingBuffer (размер 10) отсюда https://stackoverflow.com/a/28038535/2588818 и нажмите Math.round(video.currentTime) при каждом обновлении до него. seekend я иду влево (назад) в RingBuffer и беру первое значение, которое отличается от текущего времени.

Работает достаточно хорошо, чтобы использовать его для отслеживания пропущенного времени.

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));
},

...

person mons droid    schedule 24.11.2016