Я разделил видео WebM на фрагменты с помощью blob.slice (). При извлечении их из системы хранения я хочу транслировать фрагменты один за другим в HTML5 видео. Я использовал MediaSource appendBuffer для достижения этой цели. Чанки не воспроизводятся, хотя видимых ошибок нет.
Я сохранил чанки как буфер массива в очереди.
async play() {
const mediaSource = new MediaSource();
const video = this.videoc.nativeElement;
video.controls=true;
const mimeCodec = "video/webm; codecs=avc1.42E01E, mp4a.40.2";
const media = await Promise.all(this.queue.map(file => { //this.queue is an queue of arraybuffer of chunks
return new Promise(resolve => {
let media = document.createElement("video");
let blobURL = URL.createObjectURL(new Blob([file]));
media.onloadedmetadata = async e => {
resolve({
mediaDuration: media.duration,
mediaBuffer: file
})
}
media.src = blobURL;
})
}));
console.log(media);
mediaSource.addEventListener("sourceopen", async ()=>{
if (MediaSource.isTypeSupported(mimeCodec)) {
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
for (let chunk of media) {
await new Promise(resolve => {
sourceBuffer.appendBuffer(chunk["mediaBuffer"]);
sourceBuffer.addEventListener('updateend', ()=> {
sourceBuffer.onupdateend = null;
sourceBuffer["timestampOffset"] += chunk["mediaDuration"];
console.log(mediaSource.duration);
resolve()
})
})
}
mediaSource.endOfStream();
}
else {
console.warn(mimeCodec + " not supported");
}
});
video.src = URL.createObjectURL(mediaSource);
}