Три. js видео текстуры webgl Проблема CORS на сафари

Question

На моем сайте vuejs nuxt stati c, размещенном на netlify, я пытаюсь использовать видео в формате mp4, размещенное на Vimeo Pro, в качестве видеотекстуры из трех частей. 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 мобильном браузере. но в Safari 13 на ma c os и ios 13 я получаю эту ошибку в консоли

THREE.WebGLState:
SecurityError: The operation is insecure. 

Я попытался заменить видео vimeo URL-адресами других видео, размещенных в другом месте, и я получил то же самое ошибка только в сафари.

Я почти уверен, что это проблема CORS, потому что, когда я заменяю vimeo или внешний URL-адрес на видео stati c, размещенное на том же хосте (netlify), он работает нормально.

Answer 1

При дальнейшем тестировании мне кажется, что проблема была вызвана перенаправлением 302 на их CDN, которое происходит, когда вы используете URL-адрес файла vimeo.

Как указал @gman, аналогичная проблема существует на Мы с Soundclound обнаружили, что решение, предоставленное там, работает и в моем случае. Как заставить Safari 12 обрабатывать звук из soundcloud?

Я решил эту проблему, выполнив asyn c fetch-запрос для получения URL-адреса CDN, а затем передав его в video.sr c. Работает в Safari ma c и ios (13) прямо сейчас!

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