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

最新推荐文章于 2025-03-19 01:28:46 发布

积极向上的湫琳

最新推荐文章于 2025-03-19 01:28:46 发布

阅读量1.6k

点赞数 7

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_57738086/article/details/126895156

版权

本文探讨了在Chrome中为何无法显示本地.vtt字幕，并提供了两种解决方案：一是通过webserverforChrome在服务器上运行HTML，二是利用VSCode的LiveServer插件。详述了错误排查过程和实际操作步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、出现的错误

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

二、寻找原因

下面这是我写的 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 文件，就可以看到字幕正常显示了