Javascript mediasource readystate如何更改其状态

Javascript mediasource readystate如何更改其状态,javascript,html,filereader,media-source,Javascript,Html,Filereader,Media Source,在阅读了在线文档之后,我编写了下面提到的代码。当它是一个小文件时,它工作得很好。但是对于更大的文件,我得到了一个错误:Uncaught InvalidStateError:试图使用一个不可用或不再可用的对象。这是因为mediasource.readystate已更改为关闭。我无法确定哪个语句将readystate从close更改为open,然后再更改为close。我在所有位置记录了readystate值。它将在mediacallback方法内部更改为打开。是什么触发了这种变化 WT = (fun

在阅读了在线文档之后,我编写了下面提到的代码。当它是一个小文件时,它工作得很好。但是对于更大的文件,我得到了一个错误:
Uncaught InvalidStateError:试图使用一个不可用或不再可用的对象
。这是因为mediasource.readystate已更改为关闭。我无法确定哪个语句将readystate从close更改为open,然后再更改为close。我在所有位置记录了readystate值。它将在mediacallback方法内部更改为打开。是什么触发了这种变化

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();

我遇到了一个类似的问题,下面的答案解决了这个问题: