Q:

Video doesn't preload, error Chrome and Firefox

I'm obliged to click on play to see the buffer value in the console.
I tried to put the loading of the video at the beginning of my code, but it's doesn't work.
If I can't recover value of the buffer dynamically, how I can verify the percentage of the loading of my video to trigger an action ?
Thank's for helping me.
jQuery
    video.load();
    .bind('progress updateMediaState', function ()
    {
        var bufferedFinal = video.buffered.end(0);  // line 304
        var bufferedPercent = (bufferedFinal / duration) * 100;
        console.log(bufferedPercent); // give me value when I click on play only
        if ( bufferedPercent >= 10 )
        {
            $("#loading").css("display", "none");
        }
    })

Chrome

player.js:304 Uncaught IndexSizeError: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0).

Firefox

IndexSizeError: Index or size is negative or greater than the allowed amount

A:

It looks like you are trying to find the offset at index 0 on a TimeRanges object with no ranges. Before doing that, check that the buffer has content:
if (!buffered || !buffered.length) {
    return;
}

var bufferedFinal = video.buffered.end(0);
...

