chrome html5 video buffered.end event

buffer, google-chrome, html, javascript, video

Solution

try this instead:

myVideoTag = document.getElementById('video');
myVideoTag.addEventListener('progress', function(e) {
    var percent = null;
    // FF4+, Chrome
    if (myVideoTag && myVideoTag.buffered && myVideoTag.buffered.length > 0 && myVideoTag.buffered.end && myVideoTag.duration) {
        percent = myVideoTag.buffered.end(0) / myVideoTag.duration;
    } 
    // Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
    // to be anything other than 0. If the byte count is available we use this instead.
    // Browsers that support the else if do not seem to have the bufferedBytes value and
    // should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
    else if (myVideoTag && myVideoTag.bytesTotal != undefined && myVideoTag.bytesTotal > 0 && myVideoTag.bufferedBytes != undefined) {
        percent = myVideoTag.bufferedBytes / myVideoTag.bytesTotal;
    }

    if (percent !== null) {
        percent = 100 * Math.min(1, Math.max(0, percent));

        // ... do something with var percent here (e.g. update the progress bar)

    }

}, false);

... comments copied from mediaelement.js, code as well but adjusted for easier display here. I omitted the code for Firefox 3.0 as it's less than relevant. working fine in all current browsers

PS: thx to John Dyer for mejs - great stuff ;)

Problem

I'm trying to detect when a video file has completed loading. i made it work successfully on firefox and safari but on chrome, buffered event behaves strange.. so, in my local host chrome works fine but when i upload to server; buffer percentage stops about %50 but buffers %100, when page refreshed, percentage stay at %0 but it continues to buffering.. here is my javascript ``` function loaded() { var v = document.getElementById('myVideo'); var r = v.buffered; var total = v.duration; var current=v.currentTime; var start = r.start(0); var end = r.end(0); var downloadPercent= Math.round((end / total)*100) $("#loadProgress").css('width',downloadPercent+ '%'); if(downloadPercent==100){ $("#preloaderWrapper").fadeOut(function(){ document.getElementById('myVideo').play(); clearInterval(ratoteLoad); $(this).remove(); }); } } $('#myVideo').bind('progress', function() { loaded(); }); ``` any idea? thank you

Original source