How to render .mov gif files from an Appwrite storage bucked
So I've read the support thread and the guides about file uploads.
But I'm still having trouble rendering my .mov files to my React.js front end using the appwrite bucket url.
When I take that same URL and put it in the browser I get ''No video with supported format or MIME type found.
I've configured things so there is all the necessary permissions and no security
Steps to reproduce:
- Upload .mov gif from pc to bucket
- Query Current question and extract the GIF_URL from the question object
- Render the URL in a video or image JSX Element
- See that nothing renders even with the URL being logged in the right format in the console
Do I need to do something like reference the ID instead of the URL?
Maybe it's a problem with the file itself. Because when I paste the url into the browser or try and play it with media player I get a MIME type error. But when I play it in VLC Windows Media Player I can see the gif working fine
Hey there,
It sounds like the issue isn’t with how you reference the file but rather with the file format or MIME type itself. When you see the error “No video with supported format or MIME type found,” it means the browser isn’t recognizing your .mov file as a playable video.
Here are a few things to check:
• MIME Type:
When you access the URL directly, open your browser’s developer tools (Network tab) and verify the Content-Type header. For HTML5 video playback, browsers expect types like video/mp4, video/webm, or video/ogg. If it’s being served as video/quicktime (common for .mov), the browser might not support it.
• File Encoding:
Even if the file extension is .mov, the video codec inside the file might not be supported by your browser. Many browsers have better support for MP4 files encoded with H.264. You might need to convert your .mov file to an MP4 format.
• Reference by URL vs. ID:
There’s no need to reference the file by ID—the bucket URL should work fine as long as the file format is supported.
So, to solve the issue, double-check the MIME type being returned and consider re-encoding your .mov file to a more widely supported format like MP4. That should resolve the error and allow your React component (or <video> element) to play the video correctly.
