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();
我遇到了一个类似的问题,下面的答案解决了这个问题: