CORS issue? Not sure

[burnhamrobertp]

Trying to get this working for a video that is hosted on Azure blob storage.

I can initialize the panorama just fine:

player.panorama({ clickAndDrag: true, callback: function () { } });

But as soon as I attempt to play it

player.play()

I get a ton of errors in the chrome developer's console

three.js:31187 DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.(…)

I've tried to set THREE.ImageUtils.crossOrigin = 'anonymous'; as some stackOverflow posts have described, but to no avail.

Sorry to post in this manner, I don't think its necessarily a bug with panorama, but rather with my implementation. In any case any assistance would be greatly appreciated.

Edit:

Here are the CORS permissions from the azure blob storage account:

+ Getting storage CORS rules for service: blob
data:    CORS rule 1:
data:      Allowed Origins: *
data:      Allowed Methods: GET,PUT
data:      Allowed Headers: *
data:      Exposed Headers: x-ms-*
data:      Maximum Age: 5
data:
info:    storage cors show command OK```

[yanwsh]

did you put crossorigin attribute on video tag?

Like

<video crossorigin="anonymous" > </video>

Set crossorigin in javascript is not sufficient. Chrome still not trusted.

Also you need to make sure the server response with the Access-Control-Allow-Origin: * header.

This method works on all browser except safari.

If you want it works on safari, please consider use iframe to solve the cross domain issue.

check my repository with two files, iframe and iframe-video for reference.

Let me know if you have any questions.

[burnhamrobertp]

Thanks a ton, the crossover attribute is what I needed; hadn't seen it in the docs and somehow missed it.