Как можно по кадрам воспроизводить html5 video посредством JS?

Question

[Alex]

Есть у тега html5 video currentTime и duration. Само видео WebM формата 25 кадра в сек. В итоге получается такой код:

function loop(frame) {
    var totalframes = $('#wrap video')[0].duration / (1 / 25);
    if(frame < totalframes){
        $('#wrap video')[0].currentTime = (1 / 25)*frame;
    }
}

По логике я ожидал, что таким образом сдвигая таймлайн видео, получу seeking тега video через цикл js loop. Однако проблема в том, что таймлайн отлично двигается, но само видео не меняет(а точнее не прорисовывает) кадры.
В чем проблема этого кода?

UPDATE: Пример https://jsfiddle.net/9x4ogcrs/

Comments

[Шохрух Шаймардонов]

Немного не понятно как вы используете код. Лучше залейте наработки в песочницу (codepen/jsfiddle). Думаю так быстрее прилетит помощь

[Alex]

Шохрух Шаймардонов, спасибо за совет! :)
добавил

[Шохрух Шаймардонов]

alexjet73, не понятно какая у вас цель, т.к WebMediaAPI работает посекундно, т.е. 25 кадров в секунду в трубу, как погрешность. Если цель в покадровой анимации, то копайте в сторону спрайтов

[Alex]

Шохрух Шаймардонов, это не так. Если вы в клике $('#test').click сверху добавите

frameCur++;
loop(frameCur);
return;

То увидите что кадры переключаются по миллисекундам, и секунда на тайминге будет только после 25 кликов.

[Шохрух Шаймардонов]

alexjet73, это то понятно. Но доступ к кадрам (покадровой настройке) то через АПИ вы не сможете получить, вот о чем я говорю

[Alex]

Шохрух Шаймардонов, а какой еще нужен доступ к кадрам? video тег легко рисуется в canvas при помощи draw, каждый фрейм по миллисекундам. В скрипте можно добавить канвас и отрисовку и кадры будут совпадать, без всяких потерь.
Проблема только с видео с альфа каналом, оно почему то не хочет нормально идти по кадрам.