如何解决Unsafe attempt错误并正常显示视频字幕？

问题原因 #

控制台的错误提示明确是file://协议的安全限制：浏览器会把每个本地文件视为独立的安全源，即使是同目录下的字幕文件，也会被拦截，导致点击字幕按钮后加载失败自动消失。

解决方案 #

方法一：用本地HTTP服务器打开文件（推荐，无安全风险）

这是最稳妥的解决方式，绕过file协议的限制：

• Python内置服务器：
  打开命令行，切换到你的项目根目录（即AuVi.html所在的文件夹），运行对应命令：

  # Python3版本
  python -m http.server 8000
  # Python2版本
  python -m SimpleHTTPServer 8000
  

  然后在浏览器访问 http://localhost:8000/AuVi.html 即可正常加载字幕。
• VS Code Live Server插件：
  在VS Code中安装Live Server插件，右键点击AuVi.html选择「Open with Live Server」，插件会自动启动本地服务器并打开页面，无需手动输入命令。

方法二：修改浏览器安全设置（仅临时测试用）

这种方法会降低浏览器的安全防护，不建议长期使用：

• Chrome/Edge浏览器：
  右键浏览器快捷方式 → 属性 → 在「目标」栏末尾添加 --allow-file-access-from-files（注意前面有空格），点击确定后重启浏览器，再打开本地HTML文件。
• Firefox浏览器：
  在地址栏输入 about:config，搜索 security.fileuri.strict_origin_policy，将其值改为false，重启浏览器即可。

额外检查项 #

你的VTT文件格式是正确的，还可以确认两点：

• 确保字幕文件后缀是.vtt，不是将.txt文件直接重命名的（部分系统默认隐藏文件后缀，需在文件夹设置中开启显示后缀名确认）
• 路径无误：captions文件夹和AuVi.html在同一目录下，cap.vtt确实在captions文件夹内，你的HTML中src="captions/cap.vtt"路径是正确的。

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