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>
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).
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).