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

积极向上的湫琳

2024-04-24 帮助1人

一、出现的错误

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

学新通

二、寻找原因

下面这是我写的 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" />
<track src="./life.vtt" srclang="zh-cn" 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 文件字幕正常显示了

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

这篇好文章是转载于：学新通技术网

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

一、出现的错误

二、寻找原因

三、如何解决

问题描述

解决方法1

解决方法2

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐