Three.js webgl视频纹理在野生动物园中的CORS问题

Question

在netlify上托管的vuejs nuxt静态站点中，我试图将在Vimeo Pro上托管的mp4视频用作three.js中的视频纹理，并带有以下内容（简化版）

// create video dom element
let video_ele = document.createElement('video')
video_ele.className = 'video_texture'
video_ele.setAttribute('playsinline', true)
video_ele.muted = true
video_ele.loop = true
video_ele.autoplay = true
video_ele.crossOrigin = 'anonymous'
video_ele.src = "https://vimeo-video-url-here.....mp4"
document.body.appendChild(video_ele)


// create video texture from video
let video_texture = new THREE.VideoTexture(video_ele)
video_texture.minFilter = THREE.LinearFilter
video_texture.magFilter = THREE.LinearFilter
video_texture.format = THREE.RGBFormat

// map video texture to material
material = new THREE.MeshStandardMaterial({
    color: 0xa8a8a8,
    map: video_texture
})

[其他所有东西都可以在chrome，firefox和chrome移动浏览器上正常工作。但是在Mac OS和ios 13上的Safari 13中，我在控制台中抛出了此错误]

THREE.WebGLState:
SecurityError: The operation is insecure. 

我尝试用其他地方托管的其他视频的网址替换vimeo视频，但我仅在野生动物园中遇到相同的错误。

我很确定这是一个CORS问题，因为当我用同一主机（netlify）中托管的静态视频替换vimeo或外部url时，它可以正常工作。

我还尝试将时间戳添加到视频网址，以确保它不是缓存问题，但仍然没有运气

想知道如何通过vimeo之类的外部托管视频来完成这项工作？

Answer 1

经过进一步测试，在我看来，此问题是由302重定向到其CDN引起的，该重定向是在您使用vimeo文件url时发生的。