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

一、出现的错误

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

二、寻找原因

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视频加字幕</title>
</head>
<body><video controls="controls"><source src="./Wildlife.mp4" type="video/mp4" /><source src="./Wildlife.ogg" type="video/ogg" /><source src="./Wildlife.webm" type="video/webm" /><!-- Unsafe attempt to load URL file:///D:/WebFront-End/HTML/Textbook/Chapter%E2%85%A3/exercise/life.vtt from frame with URL file:///D:/WebFront-End/HTML/Textbook/Chapter%E2%85%A3/exercise/test4.html. 'file:' URLs are treated as unique security origins. --><track src="./life.vtt" srclang="zh-cn" kind="subtitles" default><!-- <track src="http://devcache.filmflexmovies.com/Test/Movies/2016/6/28/SDFEATUREMOVIE/Creed ENG.VTT" srclang="en" kind="subtitles" default> --></video>
</body>
</html>

通过查阅各种格式方面问题，都未能解决。因为我都是按照报的错来搜索的，所以查找的相关信息都和自己无关，但是无意中看到一篇文章，浏览器中无法显示 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 文件字幕正常显示了

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