javascript - How mediasource readystate changes its state

Question

After going through the online documentation, I have written the code mentioned below. Whenever it is a small sized file it works well. But with bigger files i am getting the Error: Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable. This is because the mediasource.readystate has changed to close. I am not able to figure out which statement changes readystate from close to open and then back to close. I logged the readystate value at all places. It changes to open inside the mediacallback method. What triggers this change ??

WT = (function () {
var mediaSource = new MediaSource();
function fileSelected(evt) {
    var video = document.getElementById("vid");
    var file = evt.target.files[0];
    if (file) {
        var NUM_CHUNKS = 10000, i = 0;
        var chunkSize = Math.ceil(file.size / NUM_CHUNKS);
        console.log(mediaSource.readyState);
        video.src = window.URL.createObjectURL(mediaSource);
        console.log(mediaSource.readyState);
        var queue = [];


        var mediaCallback = function (e) {
            console.log(mediaSource.readyState);
            var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
            sourceBuffer.addEventListener('updateend', function() {
                console.log("update end");
                if (queue.length ) {
                    sourceBuffer.appendBuffer(queue.shift());
                }
            }, false);
            (function readChunk(i) {
                var reader = new FileReader();
                reader.onload = function(et) {
                    var buff = new Uint8Array(et.target.result);
                    if(!sourceBuffer.updating && queue.length === 0) {
                        sourceBuffer.appendBuffer(buff);
                    } else {
                        queue.push(buff);
                    }
                    if (i == NUM_CHUNKS - 1) {
                        console.log("end of stream");
                        mediaSource.endOfStream();
                    } else {
                        if (video.paused) {
                            console.log("video puased");
                            video.play(); // Start playing after 1st chunk is appended.
                        }
                        readChunk(++i);
                    }
                };

                var startByte = chunkSize * i;
                var chunk = file.slice(startByte, startByte + chunkSize);

                reader.readAsArrayBuffer(chunk);
            })(i);
        }
        mediaSource.addEventListener('sourceopen', mediaCallback, false);
        mediaSource.addEventListener('sourceended', function(e) {
            console.log('ended: mediaSource readyState: ' + this.readyState);
        }, false);
        mediaSource.addEventListener('sourceclose', function(e) {
            console.log('closed: mediaSource readyState: ' + this.readyState);
        }, false);

    } else {
        console.log("NO FILE SELECTED");
    }
}

return {
    init: function() {
        console.log("Onclick");
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            $("document").ready(function(){
                $("#fileToUpload").on("change", fileSelected);
            });
        } else {
            alert('The File APIs are not fully supported in this browser.');
        }
    }
}
})();
WT.init();