mp4 issue, files end up broken
I added two mp4 files to my Astro site. It all works locally but when I upload via Wrangler, I'm getting the crossed-out play button like it's a plug-in error. The files are part of the design and well under one megabyte. GIFs would end up being too large in file-size.
Does someone have experience with this issue and can tell me what happened and how to fix it?
I've rolled it back to the previous version for now.
19 Replies
Pages doesn't support range requests which can mess with videos/seeking in some browsers like Chrome.
Hard to say much otherwise without an exact error. I'd do a preview build on another branch and look at console for any errors
"I'd do a preview build on another branch and look at console for any errors"
What does that mean? I works on the local install of Astro and when I run the generated code through a min web server I wrote in GOlang.
I don't get an "exact" error, it just doesn't load. When I go the the URL of the video directly, the play button is crossed out as if I had used an incompatible file.
Could it be a MIME issue? Last time I had video issues we were still dealing with QuickTime vs Windows Media when that was a thing. Since then it just sort of worked by itself.
You put this under the Cloudflare Pages category, are you not using CF Pages?
Sometimes browsers are nice and would throw an error in console when it failed to load. There's a bunch of stuff that could cause videos to fail.
I'm using pages but what do you mean by branches? Do I have to use GitHub for videos to work?
I can give you the URL of the file before I rolled back:
https://b66d368d.silverball.pages.dev/dmd/dmd_newsletter_01.mp4
The local Astro build worked and still works whether I run it from Astro or my Go server. The only thing that happened was that I deployed it with Wrangler.
The only browser I could get it work work was Brave, which discards MIME when detecting a filetype that it knows. So I thought it might be a MIME issue.
MIME type is served correctly. No idea why it only plays in Brave.that video doesn't play for you?
It loads fine for me on Chrome and Firefox
I was just saying how you could generate a preview commit to test it without deploying to prod again, but you have that old one still which works just as well
Safari just has the 'damaged' play button and almost all of my users are on Safari (iOS, iPad OS).
one thing you'll notice on Chrome is that you can't seek through the video because Pages doesn't support range headers
huh, I wonder if Safari completely dies without range header support
the content type/mime-type is fine
the range header thing would explain why it works locally from every device but not on CF. I'd hate to use GIF as that's around 10MB for looking OK or 4MB and looks crap.
According to ChatGPT, Safari requires range headers.
How can I add them?
it's not that simple, supporting range headers = you send a specific range to the server, and the server responds with that specific video range
I found a slightly more reputable source then chatgpt that confirms the same, need range headers
Pages just doesn't support them at all, it'd be extra work for them to do so, and Pages isn't made for video content/prevents some abuse (completely fine if its part of a web page though, just not like using pages as a file locker/to purely stream video from)
So what do I do now?
either host the video somewhere else (Like R2, and use a R2 Custom Domain), or convert it to gif/something that doesn't require range headers
Oh crap. I moved to CF because AWS was getting too complicated. Now it's the same hell here too.
Pages just isn't meant for video
If just doesn't say that anywhere.
kind of does in the tos/etc but who reads those things
The easiest way would probably just be to create an R2 Bucket, upload file, attach R2 custom domain. would take all of 5 minutes, and costs you $0.36/mil requests (and only counting uncached)
It takes you 5 minutes. Probably would take me all day because I don't even know what it is at this point.
True, but it really wouldn't take you that long. Cloudflare R2 is just Cloudflare's version of S3
I'll just convert it to GIF, filesize be damned. If it's big, it's big.
I'm just tired of trying to optimise for the lowest stress possible on the network only to be shat on by tech again and again.
I have a solution.
The video sequences now are on Netlify where they actually work.
I added a ternary in Astro that checks if it's
build or dev. If it's dev it uses the mp4 files within the project. If it's build, it uses the Netlify URL.