VideoTexture CORS

Questions
,
1

Hi, I’m using standard html video, and src tag which I create from code for my
video texture

            const videosRoot = document.getElementById("videosroot")

            const video: HTMLVideoElement = document.createElement("video")
            video.id = `video-${this.uid}`
            video.crossOrigin = "anonymous"
            video.playsInline = true
            video.style.display = "none"
            video.muted = true

            const source = document.createElement("source")
            source.id = `video-source-${this.uid}`

            video.appendChild(source)

            videosRoot.appendChild(video)

Using it:

         const videoElement = this.getVideoElement()
         const videoSource = this.getVideoSource()

         videoSource.setAttribute("src", value.data)
         videoSource.setAttribute("type", `video/${videoAsset.file_extension}`)
....
        videoElement.play()

I have same code, which works in html perfectly:

                <video id={uid} autoPlay controls controlsList="nodownload">
                    <source style={{objectFit: "cover"}}
                            src={videoPath}
                            type={"video/mp4"}/>
                </video>

But when I play it in three js VideoTexture

DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The video element contains cross-origin data, and may not be loaded.

Playing in HTML works perfectly but here is problem when playing inside three js. Is there some setting I forgot or something ? In html I even have no CORS setting and it is working.
Is it problem with dynamic element creation in runtime?

Because I think video is played because onEnded callback is called.

2

Ok problem solved, I had bug in azure storage CORS settings:

instad of “http://localhost:3000” I used only localhost:3000, which was working for html gui video player, but three JS had big problem with it.

image
image1584×54 2.17 KB