视频未加载 - chrome：不允许加载本地资源

Question

我正在使用 plyr 库上传视频。视频 URL 来自服务器，但是视频未加载，我在 chrome 中收到以下错误：不允许加载本地资源。

有谁知道为什么会出现这个错误？

HTML

 <video id="plyrID" controls playsinline [poster]="poster" (plyrPlay)="played($event)"
                (plyrInit)="player = $event">
                <source src="//MyServer/videos/video.mp4" type="video/mp4">
 </video>

错误

Answer 1

如果您查看上面的错误消息，您会发现它正在尝试从 URL 打开视频，开头为：

file://

浏览器正在解释此文件是本地文件而不是服务器上的文件 - 即即使您所说的 'video URL comes from a server' 浏览器看到的 URL 是本地文件 URL.

如果您希望来源是服务器上的视频，您的 HTML 代码您应该看到绝对服务器来源 URL 就像这个例子：

<video id="testVid" controls preload="auto">
    <source src="https://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type='video/mp4'>
</video>

或者一个 URL 相对于你自己的服务于当前页面的网络服务器，如下所示：

<video id="testVid" controls preload="auto">
    <source src="/MyServerMoviesFolder/ToS/tears_of_steel_720p.mov" type='video/mp4'>
</video>

您可以在此处查看更多示例：https://www.w3schools.com/html/html_filepaths.asp

如果在您的示例中，'MyServer' 是一个有效的“授权名称”，例如'MyServerDomainName.com:8080'，那么根据 RFC，你 URL 确实是一个有效的 URL。它被称为 network-path 参考 URI，并在下面链接的 RFC 的第 4.2 节中进行了描述。

不同的浏览器可能对此有不同的处理方式，如果直接在 URL 选项卡中输入以双正斜杠开头的 URI，Chrome 似乎默认为本地文件浏览器。

但是，如果 URL 中有一个有效的 'authority'，它应该解析为视频 - 请参阅下面的示例片段，该片段在 Chrome 和 Safari 上进行了测试并播放了视频：

<video id="testVid2" controls preload="auto">
    <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type='video/mp4'>
</video>

如果这在您的情况下不起作用并且默认为本地文件，则很可能 URL 不包含有效的 'authority' 部分。但是，在这种情况下，它应该在 Chrome 上给出名称未解析的大小写，如下面的代码片段所示：

const player = new Plyr('#plyrID');

<video id="plyrID" controls playsinline [poster]="poster" (plyrPlay)="played($event)"
                (plyrInit)="player = $event">
                <source src="//MyServer/videos/video.mp4" type="video/mp4">
 </video>

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>

值得注意的是，这是一种非常特殊的 URL 格式，您可能实际上并不需要使用这种格式。它通常用于使请求使用与当前页面一致的 HTTP 或 HTTPS。请参阅此处的讨论以及 RFC 中的定义：

（也看评论）
https://www.ietf.org/rfc/rfc3986.txt（第 4.2 节）

视频未加载 - chrome：不允许加载本地资源

Video does not load - chrome: Not allowed to load local resource

html

angular

typescript

html5-video

plyr