Does VideoTexture support the MOV file format?

Questions
, ,
1

Hello,

I am trying to use VideoTexture with a webm video. But iOS doesn’t seem to support webm so I am going to use a .mov file instead. Here is my React Three Fiber code:

function Plane() {
  const [video] = useState(() => {
    const vid = document.createElement("video");
    vid.crossOrigin = "Anonymous";
    vid.loop = true;
    vid.muted = true;
    vid.autoplay = true;

    const mov = document.createElement("source");
    mov.src = "./bounce.mov";
    mov.type = "video/quicktime";

    vid.appendChild(mov);
    return vid;
  });

  useEffect(() => void video.play(), [video]);
  return (
    <mesh>
      <planeGeometry args={[3, 3]} />
      <meshBasicMaterial
        side={THREE.DoubleSide} //
        transparent
      >
        <videoTexture
          format={THREE.RGBAFormat} //
          encoding={THREE.sRGBEncoding}
          attach="map"
          args={[video]}
        />
      </meshBasicMaterial>
    </mesh>
  );
}

But nothing appears. When I replace the file path with ./bounce.webm it works perfectly fine.

Any ideas how to get MOV working with VideoTexture?

2

Instead of MOV use MP4 instead. Using MOV in the web seems unusual.

3

I would for sure use mp4 but I need the alpha channel. Correct me if I’m wrong, but mp4 doesn’t have an alpha channel

4

I found some texts.

image
image721×86 11.5 KB

image
image723×164 27 KB

image

5

Yes I understand that there are only a few file formats that have an alpha channel and that’s exactly why I can’t use mp4.

What trying to do is - get a video to play on a plane.

For example it may be a fire effect animation that I would like to put on a plane and scatter it around my scene. Sort of like billboarding

As far as I know, webm is perfect for this and it even works but iOS does not support it. So I was planing to use MOV as a fallback for iOS devices.

With the question all I wanted to know is if ThreeJS supports MOV via VideoTexture. In my testing it doesn’t. But if anyone has a working example, I’d really appreciate it

Sorry for not being clear in my original post.

6

three.js has no video format specific logic. If MOV does not work, it does not with WebGL in general.

7

I see. Thank you!