Reputation: 158
I try to append buffer to sourceBuffer continuously for video. But when buffer appened then current scene pass to new appended one. I tried to fix it with timestampOffset but if there will a little gap then player stacks. After many research I figured out there is sourceBuffer.mode = "sequence" choice. But it didn't work for me. What may be the problem at my code?
const url_video = "/result_chunks/chunks1.mp4";
const url_video2 = "/result_chunks/chunks2.mp4";
const remoteCodec = `video/mp4; codecs="avc1.4d4020,mp4a.40.2"`;
const videoEl = document.querySelector("video");
const ms = new MediaSource();
videoEl.src = URL.createObjectURL(ms);
ms.addEventListener("sourceopen", function () {
const sourceBuffer = ms.addSourceBuffer(remoteCodec);
sourceBuffer.mode = "sequence";
downloadChunks(sourceBuffer);
});
function downloadChunks(sourceBuffer) {
fetch(url_video)
.then((res) => res.arrayBuffer())
.then((buffer) => {
sourceBuffer.appendBuffer(buffer);
sourceBuffer.onupdateend = () => {
sourceBuffer.onupdateend = null;
fetch(url_video2)
.then((res) => res.arrayBuffer())
.then((buffer) => {
sourceBuffer.appendBuffer(buffer);
});
};
});
}
Upvotes: 1
Views: 240