Angular操作media source extension
kelvin 发布于 2021-10-02

对于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即可。

kelvin
关注 私信
文章
92
关注
0
粉丝
0