对于media source extension的api进行调用的代码基本都是Javascript的,因为项目需要,在github上找了一个Angular版的代码参考,其代码如下
ngAfterViewInit() {
if (
"MediaSource" in window &&
MediaSource.isTypeSupported(this.mimeCodec)
) {
const mediaSource = new MediaSource();
(this.video.nativeElement as HTMLVideoElement).src = URL.createObjectURL(
mediaSource
);
mediaSource.addEventListener("sourceopen", () =>
this.sourceOpen(mediaSource)
);
} else {
console.error("Unsupported MIME type or codec: ", this.mimeCodec);
}
}
sourceOpen(mediaSource) {
const sourceBuffer = mediaSource.addSourceBuffer(this.mimeCodec);
const token = "some token"; // Load the token from some service
const headers = new HttpHeaders({ Authorization: `Bearer ${token}` });
return this.http
.get(this.assetURL, { headers, responseType: "blob" })
.subscribe(blob => {
sourceBuffer.addEventListener("updateend", () => {
mediaSource.endOfStream();
this.video.nativeElement.play();
});
blob.arrayBuffer().then(x => sourceBuffer.appendBuffer(x));
});
}
测试发现,有两个地方需要修改,this.video.nativeElement.play();直接改成this.video.play();
(this.video.nativeElement as HTMLVideoElement).src改为this.video.src即可。