Three.js webgl视频纹理CORS在狩猎上的问题

Question

在我在netlify上托管的vuejs静态站点中，我尝试使用一个托管在Vimeo上的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和ios 13上的Safari 13中，我会在控制台中抛出这个错误。

THREE.WebGLState:
SecurityError: The operation is insecure. 

我尝试将vimeo视频替换为托管在其他地方的其他视频的urls，而我只在safari中得到了相同的错误。

我很确定这是一个CORS问题，因为当我将vimeo或外部url替换为托管在同一主机(netlify)中的静态视频时，它工作得很好。

我还试图在视频url中添加一个时间戳，以确保它不是缓存问题，但仍然没有运气。

想知道如何用像vimeo这样的外部托管的视频来完成这个任务？

Answer 1

在进一步的测试中，在我看来，这个问题是由302重定向到他们的CDN引起的，当您使用vimeo文件url时会发生这种情况。

正如@gman所指出的，Soundclound也有类似的问题，我发现这里提供的解决方案也适用于我的案例。How to get Safari 12 to process audio from soundcloud?

我通过发出一个异步获取请求来获取CDN，然后将它传递给video.src来解决这个问题。现在正在safari mac和ios (13)中工作！

  async function getMediaURLForTrack(texture_to_update, passed_url) {
    await fetch(passed_url, {
      method: 'HEAD'
    })
    .then((response) => {
      texture_to_update.src = response.url
    });
  }