Does VideoTexture support the MOV file format?


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 = "./";
    mov.type = "video/quicktime";

    return vid;

  useEffect(() => void, [video]);
  return (
      <planeGeometry args={[3, 3]} />
        side={THREE.DoubleSide} //
          format={THREE.RGBAFormat} //

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?

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

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

I found some texts.


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.

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

I see. Thank you!