在浏览完在线文档后,我编写了下面提到的代码。每当它是一个小尺寸的文件,它运作良好。但是对于更大的文件,我收到错误:Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
。这是因为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();