移动 Safari 不显示我的视频纹理答案

【问题标题】：Mobile Safari Not Showing My Video Texture移动 Safari 不显示我的视频纹理
【发布时间】：2022-08-03 20:23:49
【问题描述】：

我有一个类似于this 的问题，但在我的情况下，它是 iOS 造成的麻烦（不是 macOS，我还没有尝试过），所以我希望也可以发布这个.我尝试在 Three.js 中创建视频纹理，但无法将其用于移动 Safari（iOS 15.4）。这是我的代码，我试图尽可能地整理它：


import React, { useEffect, useRef } from \"react\";
import * as THREE from \"three\";
import { Canvas } from \"@react-three/fiber\";

import \"./styles.css\";

const Screen = () => {
  const meshRef = useRef();
  useEffect(() => {
    const vid = document.createElement(\"video\");
    vid.src = \"/test.mp4\";
    vid.crossOrigin = \"Anonymous\";
    vid.loop = vid.muted = vid.playsInline = true;
    vid.play();
    meshRef.current.material.map = new THREE.VideoTexture(vid);
  });
  return (
    <mesh ref={meshRef}>
      <planeGeometry attach=\"geometry\" />
    </mesh>
  );
};
const App = () => {
  return (
    <Canvas camera={{ fov: 25 }}>
      <Screen />
    </Canvas>
  );
};

export default App;

如果我在这里做错了什么，请告诉我。 test.mp4 来自 this URL。我还尝试将视频放置为 HTML 元素，而不是动态创建它，然后视频本身可以正常播放，但视频纹理却不行。

另外，只是好奇，但为什么meshRef.current 不是在主组件中的useEffect 中可用，而是useEffect 在Screen 内部，它被放置在Canvas 内部，可以吗？

我将您的 test.mp4 网址放在我的 vid 纹理中，但它也不起作用。我的问题是 vid 纹理在笔记本电脑上运行良好，但在带有 chrome 或 safari 的手机上却不行。在笔记本电脑上使用手机模拟器无法重现。
嘿，谢谢你的回答，我完全忘记了这个问题。我解决了它，与视频格式无关，但与托管有关，可能是 CORS 标头或相关的东西。明天补充答案！

标签： reactjs three.js mobile-safari react-three-fiber

【解决方案1】：

显然这是视频文件格式的问题。尝试了来自 Three.js 的示例视频，它成功了。

【讨论】：

【解决方案2】：

你是怎么解决的？

【讨论】：