1

hopefully you can help!

On my website's local version, in my file structure I have a file test.vtt, captions for a short video. I'm using Dreamweaver to edit it.

Edit: I'm using Bootstrap 5 framework and using the default video-player.

<div class="embed-responsive">
   <video class="rounded-3" poster="assets/videos/poster.jpg" preload="metadata" controls style="max-width: 100%;" crossorigin="anonymous">
      <source src="assets/videos/video1.mp4" type="video/mp4">
      <track label="English" kind="captions" srclang="en" src="assets/videos/test.vtt" type="text/vtt" default/>
   </video>
</div>

I've connected to the remote server via DreamWeaver FTP, and uploaded the relevant files including test.vtt

When accessing the local website preview in DreamWeaver, the subtitles work flawlessly which is superb! Unfortunately, when I upload all the local files to the remote server and preview the 'live version', on Inspect Element I can see an error:

Failed to load resource: the server responded with a status of 404 (Not Found)

for the file test.vtt - despite me looking at the servers' file structure and finding the file!

Apologies - I'm pretty basic but cannot fathom out how to get the subtitles working on the live version. Anyone have any idea what I could try? I've tried moving the test.vtt file into various levels of folder substructure so it's next to the index, in case it was that! I've tried renaming and re-doing the file from scratch, too.

Any help greatly appreciated!

What I've tried:

  • Moving the test.vtt file around in the folder hierarchy in case it can't find the file?
  • Remaking the test.vtt file from scratch,
  • Naming it something else,
  • Re-uploading it to remote server alongside the other files required files (which all worked other than test.vtt)
  • Reading dozens of articles online and trying to re-structure the div to have 'track' both inline and separate but neither solution works. Also tried other bits like 'cross-origin' but doesn't resolve anything.

Appears to be a file issue on server, does it not? Sorry - I'm a bit new to all of this!

Andy
  • 4,783
  • 2
  • 26
  • 51
Zabrake
  • 25
  • 5
  • The video and poster are loading fine? Have you tried opening the file directly by typing in the URL like `https://example.com/assets/videos/test.vtt`? – Andy Dec 19 '22 at 09:05
  • Hi Andy! Thanks for your help. All the other files are working fine, which is bizarre. I've even tested some JS files and when I open them via the URL, I can see all the source code. When I try to open the test.vtt file on the URL, it says the file doesn't exist! Do you think this is a server/hosting issue rather than anything to do with captions? I'm fairly clueless but am trying my best! Thanks again. – Zabrake Dec 19 '22 at 09:08
  • Have you ruled out any typing errors, and that you are uploading to the right server? (: – Andy Dec 19 '22 at 09:31
  • Hi Andy! I believe so; I've tried a few different file-names and DreamWeaver auto-populates the file structure and name which hopefully removes typo from the equation! It's definitely the right server, and when I go onto the DreamWeaver 'remote view' I can see the file is definitely uploaded to the server - how bizarre! I've even 'opened' it from the server in DreamWeaver using Chrome and all of the correct coding populates. I am so confused! – Zabrake Dec 19 '22 at 09:55
  • Is the case of the names the same? You’re not referring to _Test.vtt_, for example, or the file is named so? – Andy Dec 19 '22 at 10:58
  • Hi Andy! I did actually encounter a case-sensitivity issue with some of my other files a few weeks ago, so I've been extra careful to make sure they're the same. In fact I've started naming files all lower-case without spaces, just so there's no risk! So hopefully this can't be it. That being said, I've tried re-naming the test.vtt file to other things and nothing seems to do the trick! – Zabrake Dec 19 '22 at 13:13
  • Just to be clear: If you cannot access the file via the URL, the issue is completely unrelated to HTML. Have you tried a different FTP client to verify the contents on the server? What kind of server are you uploading to? Do you have access to its logs? – Andy Dec 19 '22 at 13:22

1 Answers1

0

Since the server does not seem to detect the VTT file at all, I am wondering if the server is configured to recognize and serve VTT files. You might need to add a configuration that sets mime type as VTT file. Have you successfully served VTT files from this server before? Here is an article on this subject: HTML5 track captions not showing.

ABarrat
  • 26
  • 1
  • I was wondering about this as well, but not having defined the mime type for VTT files would not result in a 404, would it? – Andy Dec 19 '22 at 14:39
  • Yes, in the past I have seen a 404 error in IIS when a supported MIME type is not present. – ABarrat Dec 20 '22 at 13:18
  • Wow ok. Afaik Apache would still serve them, but the browser might then reject the file due to a type mismatch. – Andy Dec 20 '22 at 14:46
  • Thank you all for your help and guidance. I am very clueless, but you were absolutely correct - the MIME type was not present in the web.config server file. I went in, added the code as per the [linked article](https://stackoverflow.com/questions/15268604/html5-track-captions-not-showing) (as below) and it suddenly started working! Thanks again! ` ` – Zabrake Jan 10 '23 at 10:52