Firefogg

video encoding and uploading for Firefox

Example encoding and uploading at once. chunks are uploaded as soon as they are ready:

To use Firefogg on your site, you have to use the Firefogg Javascript api.
This is an example encoding and uploading at once, chunks of the video are uploaded as they are ready.
check here for more details on chunk upload.
If you have less controll over your backend, you might want to check out the POST example.

if(typeof(Firefogg) == 'undefined') {
  alert('You dont have Firefogg, please go to http://firefogg.org to install it');
  window.open('http://firefogg.org');
}

var ogg = new Firefogg();
if(ogg.selectVideo()) {
  var options = JSON.stringify({'maxSize': 320, 'videoBitrate': 500});
  var data = JSON.stringify({'title': 'example video'});
  update_progress(0, 'encoding');
  ogg.encode(options,
             function(result, file) {
                result = JSON.parse(result);
                update_progress(result.progress, result.state);
                ogg.chunk_upload('http://example.com/addvideo', data,
                    function(result) {
                        result = JSON.parse(result);
                        update_progress(result.progress, result.state);
                        if(result.resultUrl) {
                            document.location.href = result.resultUrl;
                        }
                    
                    },
                    function(progress) {
                        progress = JSON.parse(progress);
                        update_progress(progress.progress, progress.state);
                    }
                );
             },
             function(progress) {
                progress = JSON.parse(progress);
                update_progress(progress.progress, progress.state);
             }
  );
}

function update_progress(progress, text) {
    //do something with status and progress, i.e. set progressbar width:
    var progressbar = document.getElementById('progressbar');
    progressbar.style.width= parseInt(progress*200) +'px';
    progressbar.innerHTML = parseInt(progress*100) + '% - ' + text;
}