为什么相对路径路径不显示HTML5字幕

问题描述：

昨天我开始使用HTML5 Autoplay并且还添加HTML5 Tag又名字幕。为什么相对路径路径不显示HTML5字幕

我很难理解为什么当我播放* .mp4视频的示例时，它可以通过相对路径显示字幕（file：///Users/user/Desktop/test.html），但如果我通过Pycharm执行文件，例如它在浏览器上生成这个文件路径（http://localhost:63343/Desktop/test.html），并且它可以很好地加载字幕。

所以我想知道是否有办法解决我的问题。如何通过绝对路径加载字幕（file：///Users/user/Desktop/test.html）。有什么我在这里失踪？

我使用谷歌浏览器作为网页浏览器。

更新：我试图调试我的网页，我得到了与Crossorigin errors when loading VTT file相同的错误。同样的人说他们能够通过Disable same origin policy in Chrome解决这个问题。我尝试用以下方式重新启动浏览器（open -a Google\ Chrome --args --disable-web-security），但它对我的问题没有任何影响。

更新2：我刚刚在替代浏览器Safar（版本9.0.2（11601.3.9））上测试过相同的问题。在Safari上，我可以看到带有（file：///Users/user/Desktop/test.html）和（http://localhost:63343/Desktop/test.html）字幕的视频不显示。

使用谷歌浏览器（版本47.0.2526.106（64位））我可以播放视频，但我只能看到（http://localhost:63343/Desktop/test.html）的字幕。

在网络上的进一步搜索帮助我找到CORS settings attributes，其中用户可以将crossOrigin属性设置为（匿名）或（use-credentials）。我也试过，结果是视频中出现黑屏。

所以总之我认为是一个安全问题，而不是路径文件问题。

样品的test.html代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sample of video with vtt file</title> 
</head> 
<body> 
<video id="video" controls preload="metadata" width="350" height="250" autoplay> 
    <source src="SampleVideo.mp4" type="video/mp4"> 
    <source src="SampleVideo.ogg" type="video/ogg"> 
    <track label="English" kind="subtitles" srclang="en" src="subtitles-en.vtt" default> 
</video> 
</body> 
</html>

的字幕 - en.vtt文件的代码示例：

WEBVTT 

Introduction 
00:00:00.000 --> 00:00:02.000 
Wikipedia is a great adventure. It may have 
its shortcomings, but it is the largest collective 
knowledge construction endevour 

Disclaimer 
00:00:02.000 --> 00:00:05.000 
This is just a track demo using VTT

答

我看到你自己解决了它，但你是正确的，它确实是一个安全问题，因为您无法以这种方式访问本地文件系统上的文件。

我接受任何建议，有没有其他方法？ – Thanos

你需要用这种方式加载它们吗？它不能在网络服务器上运行吗？ –

这是一个很好的问题，但我想在本地测试它们的原因是因为我打算在android设备上本地保存它们。所以不幸的是，他们需要能够在本地运行。 – Thanos

为什么相对路径路径不显示HTML5字幕

相关推荐