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.

Vvoodoopants I added two mp4 files to my Astro site. It all works locally but when I upload v...

Chaika•3/10/24, 7:14 PM

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

CChaika Pages doesn't support range requests which can mess with videos/seeking in some ...

voodoopantsOP•3/11/24, 5:04 AM

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

Vvoodoopants "I'd do a preview build on another branch and look at console for any errors" W...

Chaika•3/11/24, 12:37 PM

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.

CChaika You put this under the Cloudflare Pages category, are you not using CF Pages? S...

voodoopantsOP•3/12/24, 2:19 AM

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

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.

voodoopantsOP•3/12/24, 6:26 PM

MIME type is served correctly. No idea why it only plays in Brave.

Vvoodoopants I'm using pages but what do you mean by branches? Do I have to use GitHub for vi...

Chaika•3/12/24, 6:32 PM

that video doesn't play for you?

Chaika•3/12/24, 6:32 PM

It loads fine for me on Chrome and Firefox

Vvoodoopants I'm using pages but what do you mean by branches? Do I have to use GitHub for vi...

Chaika•3/12/24, 6:33 PM

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

voodoopantsOP•3/12/24, 6:34 PM

Safari just has the 'damaged' play button and almost all of my users are on Safari (iOS, iPad OS).

Chaika•3/12/24, 6:34 PM

one thing you'll notice on Chrome is that you can't seek through the video because Pages doesn't support range headers

Chaika•3/12/24, 6:34 PM

huh, I wonder if Safari completely dies without range header support

Chaika•3/12/24, 6:35 PM

the content type/mime-type is fine

CChaika huh, I wonder if Safari completely dies without range header support

voodoopantsOP•3/12/24, 6:36 PM

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.

voodoopantsOP•3/12/24, 6:37 PM

According to ChatGPT, Safari requires range headers.

voodoopantsOP•3/12/24, 6:37 PM

How can I add them?

Chaika•3/12/24, 6:40 PM

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

Chaika•3/12/24, 6:40 PM

I found a slightly more reputable source then chatgpt that confirms the same, need range headers

Chaika•3/12/24, 6:41 PM

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)

CChaika it's not that simple, supporting range headers = you send a specific range to th...

voodoopantsOP•3/12/24, 6:42 PM

So what do I do now?

Chaika•3/12/24, 6:42 PM

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

voodoopantsOP•3/12/24, 6:44 PM

Oh crap. I moved to CF because AWS was getting too complicated. Now it's the same hell here too.

Chaika•3/12/24, 6:44 PM

Pages just isn't meant for video

CChaika Pages just isn't meant for video

voodoopantsOP•3/12/24, 6:45 PM

If just doesn't say that anywhere.

Chaika•3/12/24, 6:48 PM

kind of does in the tos/etc but who reads those things

Vvoodoopants If just doesn't say that anywhere.

Chaika•3/12/24, 6:48 PM

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)

CChaika The easiest way would probably just be to create an R2 Bucket, upload file, atta...

voodoopantsOP•3/12/24, 6:49 PM

It takes you 5 minutes. Probably would take me all day because I don't even know what it is at this point.

Chaika•3/12/24, 6:49 PM

True, but it really wouldn't take you that long. Cloudflare R2 is just Cloudflare's version of S3

voodoopantsOP•3/12/24, 6:50 PM

I'll just convert it to GIF, filesize be damned. If it's big, it's big.

voodoopantsOP•3/12/24, 6:53 PM

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.

voodoopantsOP•3/13/24, 5:29 AM

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

build

dev

dev

. If it's

dev

dev

it uses the mp4 files within the project. If it's

build

build

, it uses the Netlify URL.

mp4 issue, files end up broken

Similar Threads

Similar Threads

Similar Threads