Mobile Safari Not Showing My Video Texture

Question

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?

Answer 1

Apparently it's a problem with video file formats. Tried an example video from Three.js and it worked.