WebVTT字幕文件上传至在线站点后无法加载的问题求助

问题概述 #

本地用Dreamweaver开发时，test.vtt字幕配合Bootstrap 5默认视频播放器可正常工作，但通过Dreamweaver FTP上传至远程服务器后，在线预览时字幕文件返回404错误——服务器文件结构中确实存在该文件。

已尝试的操作：

• 调整test.vtt文件的文件夹层级位置
• 重新创建test.vtt文件
• 修改文件名
• 重新上传文件
• 调整HTML结构及添加cross-origin属性

可行解决方向 #

1. 配置服务器MIME类型 #

多数服务器默认不会识别.vtt文件的MIME类型，需手动添加：

• Apache服务器：在站点根目录的.htaccess文件中添加：

  AddType text/vtt .vtt
  

• Nginx服务器：在站点配置的server块内添加：

  types {
      text/vtt vtt;
  }
  

修改后重启服务器生效。

2. 核对路径大小写 #

本地Windows系统大小写不敏感，但远程Linux服务器严格区分大小写：

• 检查HTML中引用VTT的路径，确保和服务器上的文件名完全一致（比如Test.vtt和test.vtt会被视为不同文件）
• 通过服务器控制面板或SSH确认文件的实际名称，避免Dreamweaver FTP上传时自动修改大小写

3. 修正文件权限 #

确保test.vtt文件允许公开访问：

• 将文件权限设置为644（所有者可读可写，组及其他用户可读），文件夹权限设为755
• 可通过服务器文件管理器或SSH命令修改：chmod 644 test.vtt

4. 验证文件完整性 #

Dreamweaver FTP可能出现上传不完整的情况：

• 用第三方FTP工具（如FileZilla）重新上传test.vtt，对比本地和服务器文件的大小是否一致
• 直接在服务器上查看test.vtt内容，确认和本地文件完全匹配（避免编码或换行符差异）

5. 清除缓存 #

• 按Ctrl+Shift+R强制刷新页面，或在浏览器开发者工具的网络面板勾选「禁用缓存」后重新加载
• 若站点使用CDN，手动刷新CDN缓存，确保最新的字幕文件被分发

内容的提问来源于stack exchange，提问作者Zabrake