`$s` 不是有效视频，尽管有 png url

Question

我正在使用 aframe 开发一个 angular 网络项目。

我有一个包含矩形angular 按钮的数据模型，其图像（jpg、png、gif）为url。然而，当我尝试加载这些纹理时，我收到以下警告：

components:texture:warn $s is not a valid video https://s3.eu-central-1.amazonaws.com/...-bed3-06ba2a75717c.png

(url 缩短了，注意它是如何 png)

按钮也显示为黑色，没有纹理。

下面是我创建按钮的方法：


buttons.forEach((b: ButtonV4) => {
    const button: Entity = document.createElement("a-plane");
    const url: string = this.envService.buildURL(b.image);
    button.setAttribute("src",url);
    button.setAttribute("position",new THREE.Vector3(b.x,b.y,b.z));
    button.setAttribute("rotation",new THREE.Vector3(0,0,b.rotation));
    button.setAttribute("width",b.width);
    button.setAttribute("height",b.height);
    button.setAttribute("material", "transparent: true;");
    sceneRoot.appendChild(button);
});

有办法解决这个问题吗？

编辑：

我注意到它可以很好地播放视频 url。 IE。提供一个 mp4 文件使其以纹理形式播放视频。

Answer 1

问题出在我的数据服务器上。内容类型设置为 application/octet-stream，我无法更改（超出我的范围）。 aframe 似乎自动将其解释为 mp4/video 文件。

虽然我的文件以 png、jpg、mp4 结尾，但我检查文件结尾并创建具有正确 mime 类型的数据 url。

return this.http.get<File>(url,{responseType: "blob" as "json",headers}).pipe(
        switchMap((blob: File) => {
            return new Observable<Texture>(
                (obs: Observer<Texture>) => {
                    const fr: FileReader = new FileReader();
                    fr.onload = (e: ProgressEvent<FileReader>) => {
                        let dataUrl: string = e.target.result as string;
                        const mime: string = this.getMimeTypeFromURL(url);
                        dataUrl = dataUrl.replace("application/octet-stream",mime);
                        obs.next(new Texture(url,dataUrl));
                    };
                    fr.onloadend = () => obs.complete();
                    fr.onabort = (e: ProgressEvent<FileReader>) => obs.error(e.target.error);
                    fr.onerror = (e: ProgressEvent<FileReader>) => obs.error(e.target.error);
                    fr.readAsDataURL(blob);
                }
            );
        })
    );

private getMimeTypeFromURL(url: string): string {
        if(url.endsWith("jpg")) {
            return "image/jpg";
        }
        if(url.endsWith("jpeg")) {
            return "image/jpg";
        }
        if(url.endsWith("png")) {
            return "image/png";
        }
        if(url.endsWith("gif")) {
            return "image/gif";
        }
        return "application/octet-stream";
    }

`$s` 不是有效视频，尽管有 png url

`$s` is not a valid video, depsite having png url

typescript

aframe