HTML5 video buffers backwards
<p>I implemented a buffer bar for html5 videos. When I watch them via browser, it buffers fine, but via android app it works as well but buffer bar is jumping.</p>

<p>Percentage goes for example 0.10 -> 0.25 -> 0.20 -> 0.30 -> 0.35 -> 0.30 and so on. It looks like its twitching for some reason.</p>

<p>What could cause this problem?</p>

<p>I am using shared hosting but even pulling out of a vps server, its the same result and its only via phone's browser. Chrome browser on the phone or webview on my app causes the same result...</p>

<p>EDITED:</p>

<p>As i mentioned, I have no idea what causes it as on the browser works fine..but that's my js:</p>

<pre><code>var startBuffer = function(buffer,myVideo) {

var maxduration = myVideo.duration;
var currentBuffer = myVideo.buffered.end(0);
var percentage = 100 * currentBuffer / maxduration;
$('.'+buffer).css('width', percentage+'%');

if(currentBuffer == maxduration){
    clearTimeout()
} else {
    setTimeout(function(){startBuffer(buffer,myVideo);}, 100);
}
console.log("maxduration:"+maxduration);
console.log("buffer:"+currentBuffer);
console.log("video:"+buffer);
};
</code></pre>

<p>The buffer and myVideo values comes from this piece of code:</p>

<pre><code>$('.play').on('click', function () {
    var myVideo = $('#' + $(this).data('video-id')).get(0); 
    var buffer = $(this).data('buffer-id'); 
    if (myVideo.paused) {
        $('video').each(function () {
          this.pause();
        });
      myVideo.play(); 
      startBuffer(buffer,myVideo);
    }
    else { 
      myVideo.pause(); 
    } 
});
</code></pre>

<p>And thats my android code for webview:</p>

<pre><code>    WebView webView = (WebView) getActivity().findViewById(R.id.webView);

    WebSettings webSettings = webView.getSettings();
    webView.setScrollbarFadingEnabled(false);
    webSettings.setJavaScriptEnabled(true);
    webView.setWebViewClient(new WebViewClient());
    webView.loadUrl("http://website.com");
</code></pre>