Mobile Safari 不显示我的视频纹理

发布于 2025-01-15 01:44:15 字数 1433 浏览 2 评论 0原文

我有一个类似于这个的问题，但就我而言，它是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 来自此网址。我还尝试将视频放置为 HTML 元素，而不是动态创建它，然后视频本身可以正常播放，但视频纹理不能播放。

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

原文

I have a question similar to this one, but in my case, it's iOS causing troubles (not macOS, which I haven't tried yet), so I hope it's OK to post this as well. I tried to create a video texture in Three.js and can't bring it to work on mobile Safari (iOS 15.4). Here is my code, which I tried to tidy up as much as possible:


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;

Please tell me if I'm doing something wrong here. The test.mp4 is from this URL. I also tried to place the video as HTML element, instead of creating it dynamically, then the video itself plays fine, but not the video texture.

Also, just curious, but why isn't meshRef.current available in a useEffect in the main component, but useEffect inside of Screen, which is placed inside of Canvas, is OK?

分享到QQ

分享到微博