HTML嵌入MP4视频加载VTT字幕触发file协议跨源报错如何解决

该报错由浏览器同源安全策略触发：
当你直接双击本地HTML文件，通过file://协议打开页面时，浏览器会将每一个本地文件路径视为独立的安全源，哪怕MP4视频、VTT字幕、HTML文件都存储在你本地电脑的同一项目目录下，<track>标签发起的字幕文件加载请求也会被判定为跨源非法请求，直接被拦截。
你之前添加crossorigin="true"后视频反而无法加载，是因为file://协议本身不存在合法的CORS跨域授权响应头，添加该属性后浏览器会强制对所有该标签下的资源请求做跨域权限校验，原本可以正常加载的MP4视频也会因为校验不通过被拦截。

你当前写的视频标签代码路径逻辑没有问题，不需要修改标签结构，只要避开file://协议的限制即可，推荐方案如下：

• 本地调试时启动静态Web服务，通过本地HTTP地址访问页面：
  如果你使用VS Code编辑器，直接安装Live Server插件，右键点击index.html文件选择「Open with Live Server」，插件会自动启动本地静态服务，在浏览器中通过http://localhost开头的地址打开页面，视频和字幕都可以正常加载，不需要额外配置属性。
  如果你本地安装了Python环境，可以进入D:/Projects/05-Practice项目根目录，打开终端执行对应命令启动简易服务：
  Python 3.x 版本执行：
  python -m http.server 8000
  Python 2.x 版本执行：
  python -m SimpleHTTPServer 8000
  服务启动后，在浏览器访问http://localhost:8000即可正常加载带字幕的视频。
• 后续将页面部署到线上环境时，只要将VTT字幕文件和页面、视频资源放在同一域名下，保持你当前写的相对路径即可正常运行；如果字幕文件存放在其他域名下，才需要给字幕资源所在的服务器配置CORS响应头，同时给video标签添加对应的crossorigin属性。

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