Question

昨天我开始使用HTML5 Autoplay并添加HTML5 Tag又名字幕。

我无法理解为什么当我播放* .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）字幕的字幕，但不显示视频。

使用Google-Chrome（版本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>

subtitles-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字幕

1 个答案: