Videotexture can't show the video on ios. but laptop works

Questions
,
1

Hey everyone,

I am trying to embbed the video to the planeGeometry via videoTexture. the original settings like below:

 const vid = document.createElement("video");
  vid.src = "data/test.mp4";
  vid.currentTime = 0.1;
  vid.crossOrigin = "Anonymous";
  vid.playsInline = false;
  vid.muted = true; 
  vid.setAttribute("webkit-playsinline", "webkit-playsinline");
  vid.setAttribute("playsinline", "playsinline");

And I use react-three-fiber to render

<planeGeometry attach="geometry" args={[2, 1, 10]} />
  <meshBasicMaterial
    color="white"
    side={DoubleSide}
    transparent={false}
    opacity={1}
  >
    <videoTexture attach="map" args={[video]} />
</meshBasicMaterial>

It works when I open the website on laptop and android phone.
But the ios CAN’T.

Can anyone can help? thanks !

2

Can you please verify if the following example runs on your iOS device?

https://threejs.org/examples/webgl_video_panorama_equirectangular

3

Thanks for replying. Yes, this example can work on my ios device.

4

Strange. Do you mind sharing your entire code as a live example (codesandbox, fiddle etc.)?

5

I had a similar issue. For others searching: My video was in the wrong codec for iOS devices. iOS has limited support for H.265/HEVC encoded videos. To ensure compatibility, you should use the H.264 codec.

ffmpeg -i input_video.mp4 -vcodec libx264 -crf 28 -preset slow -pix_fmt yuv420p output_video.mp4

Hope this helps someone.