Support web standard <audio> and <video> formats

[thescientist13]

Overview

Completely missed that currently there isn't any support for loading resources that could be used in <video> or <audio> tags like an .mp4 or .mp3! Should probably get on that...

Details

Would just need to follow pattern of our standard font or images plugins and create two new plugins, one for each format type

1. Audio - https://www.thoughtco.com/audio-file-mime-types-3469485
2. Video - https://help.encoding.com/knowledge-base/article/correct-mime-types-for-serving-video-files/
3. Add a test case for at least one format per type (.mp3 and .mp4 respectively)

Would likely want to get this in ASAP after #948 lands since the API for resource plugins is changing a bit

[thescientist13]

Overview

Ok, so did a bit research on this and seems aside from Safari, we can mostly get what we need to make this at least a reasonable developer experience.

Accept

First thing I wanted to check was about Accept headers, thinking browsers would send that based on the resource coming from <script> or <video> or <audio> etc, but it seems most browsers are usually just end up sending */* and so will basically just say "send me whatever". 🤷‍♂️

These are the values sent when the context doesn't give better information. Note that all browsers add the / MIME Type to cover all cases.

So not sure if this means anything goes and that we don't need to check, or rather that a browser would do the checking itself? It's not so clear and even the docs on Content Negotiation don't offer much help it seems. 😕

Sec-Fetch-Dest

Then I found the Sec-Fetch-Dest header which is exactly what we're looking for..... 🙌

Sec-Fetch-Dest: audio
Sec-Fetch-Dest: audioworklet
Sec-Fetch-Dest: document
Sec-Fetch-Dest: embed
Sec-Fetch-Dest: empty
Sec-Fetch-Dest: font
Sec-Fetch-Dest: frame
Sec-Fetch-Dest: iframe
Sec-Fetch-Dest: image
Sec-Fetch-Dest: manifest
Sec-Fetch-Dest: object
Sec-Fetch-Dest: paintworklet
Sec-Fetch-Dest: report
Sec-Fetch-Dest: script
Sec-Fetch-Dest: serviceworker
Sec-Fetch-Dest: sharedworker
Sec-Fetch-Dest: style
Sec-Fetch-Dest: track
Sec-Fetch-Dest: video
Sec-Fetch-Dest: worker
Sec-Fetch-Dest: xslt

Safari

But of course Sec-Fetch-Dest it is not supported in Safari (yet)
https://caniuse.com/mdn-http_headers_sec-fetch-dest

and Safari and iOS need additional content length headers and 206 status codes which we are missing as part of this v0.28.0 refactor.

Summary

So all in all, it seems that Sec-Fetch-Dest should get us most of the way there for Chrome / Edge / Firefox / Newer Safari. It should be noted that if hosting on Netlify for example, they are taking care of all the "Safari-isms", so there's that.
https://www.newenglandbackline.biz/

I think we should do what we can for now which is

1. Add Content-Length header for Safari (and 206)
2. Add Sec-Fetch-Dest header

Then create a follow up enhancement ticket to address the following prior to 1.0 launch

1. Retroactively apply Sec-Fetch-Dest to all resource plugins
2. Add Webkit sniffing for older Safari support
3. Add documentation