Search code examples
reactjshtml5-videovitequicktime

Transparent MOV files not appearing in my React webpage

I'm trying to use transparent video in React, I used webM initially but it doesn't support on some devices so I have tried moving over to MOV. However, cannot get it working in React + Vite. I have already tried adding this to my vite config assetsInclude: ["**/*.mov"] but they are still not appearing.

I created a lightweight project showing how its not working here: https://codesandbox.io/p/sandbox/flamboyant-gianmarco-9qngsy?file=%2Fsrc%2FApp.tsx%3A19%2C13

Alternatively you can recreate the issue by testing the below version in any HTML previewer:

    <!DOCTYPE html>
    <html>
    <body>
    
    test 1: <br>
    <video className="video">
    <source src="https://9qngsy-5173.csb.app/crown.mov" type="video/mov" />
    </video>
    
    <br> test 2: <br>
    <video className="video">
    <source src="https://9qngsy-5173.csb.app/crown.mov" type="video/quicktime" />
    </video>
    
    <br> test 3: <br>
    <video src="https://9qngsy-5173.csb.app/crown.mov" className="video">
    </video>
    
    <br> test 4: <br>
    <video className="video">
    <source src="https://9qngsy-5173.csb.app/crown.mov" type="video/quicktime" />
    </video>
    
    </body>
    </html>

Solution

  • " I have tried moving over to mov. However, cannot get it working in React + Vite"

    Not all browsers support MOV files so test on a compatible browser.
    For example Safari and Chrome will both play MOV, but you'll get no playback in Firefox (because it expects webM for video transparency).

    " I have already tried adding ... but they are still not appearing."

    This line works to display your MOV inside the Chrome browser:
    (no Apple device here to test on Safari browser, it might be more strict about needing a type= setting. Also the video's "transparency" channel itself was not tested).

    <video src="https://9qngsy-5173.csb.app/crown.mov" className="video">
</video>