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

一、出现的错误

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

浏览器对HTML5中track标签中src属性路径vtt文件错误,Unsafe attempt to load URL vtt_第1张图片

 二、寻找原因

下面这是我写的 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 的插件

浏览器对HTML5中track标签中src属性路径vtt文件错误,Unsafe attempt to load URL vtt_第2张图片

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

浏览器对HTML5中track标签中src属性路径vtt文件错误,Unsafe attempt to load URL vtt_第3张图片

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

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

 

你可能感兴趣的:(html,前端)