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

Question

昨天我开始使用 HTML5 Autoplay and also adding HTML5 Tag 字幕。

我无法理解为什么在播放 *.mp4 视频样本时它可以通过相对路径 (file:///Users/user/Desktop/test.html) 显示字幕但是如果我通过 Pycharm 执行文件，它会在浏览器上生成这个文件路径 (http://localhost:63343/Desktop/test.html) 并且它加载字幕就好了。

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

我正在使用 google-chrome 作为网络浏览器。

更新： 我试图调试我的网页，但我遇到了与 Crossorigin errors when loading VTT file. Where same people say that they were able to solve this problem by 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) 的视频未显示。

Google-Chrome（版本 47.0.2526.106（64 位））我可以双向播放视频，但我只能看到带有 (http://localhost:63343/Desktop/test.html) 的字幕.

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

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

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

Answer 1

我看到你已经自己解决了，但你是对的，这确实是一个安全问题，因为你不能那样访问本地文件系统上的文件。

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

Why relative path path does not display HTML5 subtitles

html

relative-path

absolute-path

webvtt