我正在从 API 获取
fetch()response.bodyreader然后将所有块 (
valuechunks.push(value)块数组随后会转换为 arrayBuffer (
let buffer = await blob.arrayBuffer()以上所有步骤均正确运行！我唯一的问题是将缓冲区附加到 sourceBuffer 中 (
sourceBuffer.appendBuffer(buffer)控制台没有弹出错误，但sourceBuffer没有更新。它一直是空的。
有人知道发生了什么吗？
非常感谢
<body>
<video id="test-video-api">
</video>
<script>
const fetchUrl = "https://myserver/api/video?fuid=12345";
const videoTag = document.getElementById("test-video-api");
function getVideo(){
if (window.MediaSource) {
var mediaSource = new MediaSource();
videoTag.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.log("The Media Source Extensions API is not supported.")
}
async function sourceOpen(e) {
URL.revokeObjectURL(videoTag.src);
const mimeCodec = 'video/mp4; codecs="avc1.4d400d,mp4a.40.2"; profiles="isom,iso2,avc1,mp41"';
var mediaSource = e.target;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
let chunks = [];
let response = await fetch(fetchUrl, {method: "GET", credentials: "include"});
const reader = response.body.getReader();
while (true){
const {done, value} = await reader.read();
chunks.push(value);
if(done){
let blob = new Blob(chunks);
let buffer = await blob.arrayBuffer();
sourceBuffer.appendBuffer(buffer);
break
}
}
}
}
getVideo()
</script>
</body>
可能你需要等待缓冲区完成更新
还有 chunks.push(value);如果（完成）之后
while (true) {
const {done, value} = await reader.read();
if (done) {
let blob = new Blob(chunks);
let buffer = await blob.arrayBuffer();
while (true) {
if (!sourceBuffer.updating) break
console.log('bufferupdating, so wait...')
await new Promise(resolve => setTimeout(resolve, 50));
}
sourceBuffer.appendBuffer(buffer);
while (true) {
if (!sourceBuffer.updating) break
console.log('buffer updating, so wait...')
await new Promise(resolve => setTimeout(resolve, 50));
}
break
}
chunks.push(value);
total += value.length;
console.log(total)
}