Lacking Support for VTT files

I use VTT files for video subtitles and chapters and it requires a loader for VTT files. For my local DEV I had added “text/VTT” in mime-db module and in \webpack\dist\webpack.js I modified the loader line 4649 to test: /\.(webm|mp4|ogv|vtt)$/i, WebVTT is a widely supported feature, could you please add it? Thank you!

We’ll get a feature request filed to add it, but no promises as to how fast we’ll implement it, but for today, you can use custom headers to achieve that result yourself:

Thank you very much!

HI, @csabourin. Our testing indicates that VTT files should receive the correct MIME type now. Would you be willing to redeploy this site (or some other site with VTT files) and let us know if the correct MIME type is sent now?

I’m not much of a backend developer, so forgive me if I’m missing something really obvious, but how do I add the MIME type in the netlify.toml file?

Here’s what the headers section looks like at the moment:

[[headers]]
  for = "/assets/fonts/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"
    Cache-Control = "public, max-age=31536000"

I’ve tried adding a separate for line like this, but Netlify won’t parse it and fails the build:

[[headers]]
  for = "/*"
    [headers.values]
    Add-Type = "text/vtt .vtt"
  for = "/assets/fonts/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"
    Cache-Control = "public, max-age=31536000"

Maybe it’s the way I’ve added the value? I’m guessing, really. Maybe Add-Type = "text/vtt .vtt" should be done a different way? I’ve tried AddType (without the hyphen) and a few other variations, but with no luck. I can’t spot anything in the custom headers documentaion about how to add a new MIME type.

Any help would be greatly appreciated – as it stands, I’d be serving videos that communicate nothing to non sighted users, so I’d be creating an inaccessible experience if I were to use native video.

Hi @tempertemper,

As @luke said above, the problem has been already solved. VTT files are served with the correct mime type without you having to do anything. Could you share the URL with which you’re having this problem?

Also, the netlify.toml you shared has multiple problems and it won’t work, but I think we need to focus on the bigger problem that is the mime type. But if you wish to discuss the file, we’d be happy to do so.

Haha I must’ve been drafting my reply to @fool when @Luke posted his message! What a coincidence :grinning_face_with_smiling_eyes:

I’ve realised I am using a video on a post on my website, so I’ve redeployed it (Today at 10:16 AM) and it’s still not picking up the .vtt file. The HTML looks fine (although I’d be happy to be corrected if you spot anything), but here it is for good measure:

<video title="An animation of BMO from Adventure Time, dancing happily" controls loop muted disablePictureInPicture preload="none" poster="/assets/img/blog/bmo-static.jpg" class="natural-dimensions" width="400" height="300" loading="lazy">
    <source src="/assets/img/blog/bmo-animated.mp4" type="video/mp4" />
    <track default label="English" kind="captions" srclang="en" src="/assets/img/blog/bmo.vtt" />
    This was supposed to be an animation of BMO from Adventure Time dancing happily. Unfortunately, your web browser does not support the video element.
</video>

It’s on this page and is towards the bottom of the article.

Thanks for taking a look :heart:

Ahh, I see the confusion. Even though @luke posted it right before you, the VTT support has existed for a long time now.

Also, I checked your VTT file and it returns the correct response. Here’s the entire curl command:

curl -i 'https://www.tempertemper.net/assets/img/blog/bmo.vtt'
HTTP/2 200 
accept-ranges: bytes
cache-control: public, max-age=0, must-revalidate
content-length: 73
content-type: text/vtt; charset=UTF-8
date: Mon, 12 Jul 2021 09:33:49 GMT
etag: "40f50a85d111f58d7a78bf7ad74d21bf-ssl"
strict-transport-security: max-age=31536000
x-nf-request-id: 01FAD11TFRFC1F9EH3S9K2F2X3
age: 8
server: Netlify

1
00:00:00,000 --> 00:00:01,000
BMO from Adventure Time, dancing happily

That’s great that it’s returning a 200. Thanks for checking! With that, I’ll try and work out what I’m doing wrong in the HTML :+1:

You mentioned you’d be ok to keep me right with the syntax in the netlify.toml file – how might I keep my header rules for fonts but add something else that applies globally? (A new MIME type might be a decent example, although I don’t need to add .vtt anymore, of course!)

I think your VTT file is the problem here. VTT files usually start with the text:

WEBVTT

1
foo bar

Maybe try that.

About your toml file, sure happy to help you with that. However, the line here is the problem:

Unfortunately, headers applied globally take over preference and no other header is applied to individual files. So, the configuration you’re looking for, won’t be possible.

However, if you had to add for individual files, the rules would look like:

[[headers]]
  for = "/path1.ext"
    [headers.values]
    # the required header

[[headers]]
  for = "/path2.ext"
    [headers.values]
    # the required header

You can’t add more than one for in the same [[header]] block.

1 Like

Adding WEBVTT fixed it (that and fixing a typo where I’d used a comma instead of a full stop :man_facepalming:). Thank you very much for the help! And it’s great that you added VTT as a pre-configured file format!

And thanks for the help on defining headers: a separate [[headers]] blocks is the way to go :+1:. Also, great to know the global marker overrides anything else – I’ll be sure to add only particular files or directories.

:heart_eyes: