I'm having a bit of difficulty using the 'progress' event to check if a video is 100% loaded. It only seems to work in Chrome/Safari. Firefox doesn't seem to want to 'preload' a video unless I try to play it.

Here is my html:

<div id=control>

    <a data-video=video/transport/1.0.webm>video1</a>

    <a data-video=video/transport/2.0.webm>video2</a>

    <a data-video=video/transport/3.0.webm>video3</a>

    <a data-video=video/transport/4.0.webm>video3</a>

    <a data-video=video/transport/5.0.webm>video3</a>

</div>



<video id=video width=960 height=500 type=video/webm autobuffer></video>

Here is my js (code borrowed from chrome html5 video buffered.end event):

$(function(){



    var vid = document.getElementById('video');



    vid.addEventListener('progress', onProgress, false);



    $('#control a').click(function(){

        vid.src = $(this).attr('data-video');

        vid.load();

    });



});



function onProgress(e){



    var vid = document.getElementById('video');

    var percent = null;



    if (vid.buffered.length > 0 && vid.buffered.end && vid.duration) {

        percent = vid.buffered.end(0) / vid.duration;

    } else if (vid.bytesTotal != undefined && vid.bytesTotal > 0 && vid.bufferedBytes != undefined) {

        percent = vid.bufferedBytes / vid.bytesTotal;

    }



    if (percent !== null) {

        percent = 100 * Math.min(1, Math.max(0, percent));



        console.log(percent);

    }



}