2

昨天我开始使用HTML5 Autoplay并添加HTML5 Tag aka Subtitles。

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

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

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

更新：我正在尝试调试我的网页，并且在加载 VTT 文件时遇到与 Crossorigin 错误相同的错误。同样的人说他们能够通过禁用 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 设置属性，用户可以在其中将 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>

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
4

1 回答 1

1

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

于 2016-01-21T11:35:08.887 回答