Firefox only works once (before video is cached)

[marcelhadorn]

I'm having a strange error, when empty cache and I call the website, the script works, as soon as I reload, nothing happens anymore.

function loadProgress(percentBuffered) {

         console.log('Buffering: ' + percentBuffered + '%');
                        percentages.animate({
                            width: '' + percentBuffered * 1 + '%'
                        }, 300);
                    }

                    function videoReady() {
                        console.log('Ready!');

                        $('.site-header').addClass('loaded');
                        document.getElementById('video_background').play();

                        setTimeout(function() {
                            $('.site-header').addClass('done');
                            $('.site-header').removeClass('loaded');
                        }, 1000);
                    }
                        var playVideo = new Mediabuffer(document.getElementById('video_background'), loadProgress, videoReady);
                        playVideo.load();

Seems like Firefox isn't executing for videos that are already cached.

[krisnoble]

Thanks for the report, trying to pin down the cause of the error. It seems that FF doesn't report already-loaded time ranges as expected. Not sure if by design or a bug at this point but will keep investigating and report back.

[marcelhadorn]

Seems like IE does the same. As you say, if a Video is fully cached in IE and FF, it seems not to report progress at all.

So I've solved this for the current project like so (Iv'e removed my non-related project based code so it's not related to what I've posted before):

function videoProgress(percentBuffered) {
    progress.animate({
        width: '' + percentBuffered * 1 + '%'
    }, 300);
}

// fill progress-bar for consistent UI behaviour
function progressFallback(timing) {
    progress.animate({
        width: '100%'
    }, timing);
}

function videoReady() {
    console.log('Ready!');
    document.getElementById('video').play();
}

// check if video is already cached, if true, play Video directly else use Mediabuffer,js to load and play
if(document.getElementById('video').readyState > 0){
    console.log('already loaded');
    progressFallback(300); 

    setTimeout(function(){
        videoReady();
    }, 300);
} else {
    // load video and run videoReady when done with mediabuffer.js
    var playVideo = new Mediabuffer(document.getElementById('video'), videoProgress, videoReady);
    playVideo.load();
}

Not sure if this is the the way to go, since I recall using mediabuffer.js because readyState didn't act exactly the same on all browsers (before using mediabuffer.js I ran into the chrome bug you mention in readme of your script). However it seems to work nicely in combination now. Hope this helps.