浏览器对HTML5中track标签中src属性路径vtt文件错误，Unsafe attempt to load URL vtt

一、出现的错误

这是我运行之后在浏览器中看不到想要的效果（没有字幕），然后查看控制台，发现有一个浏览器的拦截错误

 二、寻找原因

下面这是我写的 html 文件，想要给 video 视频添加字幕

通过查阅各种格式方面问题，都未能解决。因为我都是按照报的错来搜索的，所以查找的相关信息都和自己无关，但是无意中看到一篇文章，浏览器中无法显示 vtt 字幕，所以想要通过这个方式，写一篇博客，在别人遇到相同问题时，搜索控制台的报错，也能找到解决办法。

三、如何解决

解决 Chrome（edge同样） 无法显示本地的 .vtt 字幕文件（如何让本地 HTML 运行在 Server 上）

问题描述

在使用 Chorme 打开本地的 html 后，播放 html 中 内嵌的 超媒体标签 （video 标签）视频时，不显示加载的 .vtt 文件字幕，甚至在控制台报错

解决方法1

①需要把 html 文件运行在 服务器 （server）上才能正常运行（即正常显示 .vtt 文件字幕），我们可以为 浏览器 安装一个 web server for Chorme 这个就不赘述了，可以直接在浏览器找方法，下载web server for Chorme.crx 这个文件，edge浏览器的话，下载完成，直接拖放给 edge 是会出现错误（不允许），需要点击到拓展页面拖放，就可以添加成功了

②安装完成以后，启动插件，选择文件（choose folder），也就是选择你的目标 html 文件，就可以看到字幕正常显示了

解决方法2

①若你使用的开发工具是 vscode，你可以在 vscode 中下载一个 Live Server 的插件

 然后重启 vscode ，打开你的 html 文件，点击鼠标右键，点击 Open with Live Server

 就可以看到神奇发生了，vtt 文件字幕正常显示了

❀感谢你能耐心看到这儿❀