警告：<link rel=preload> 必须有一个有效的 `as` 值答案

【问题标题】：Warning: <link rel=preload> must have a valid `as` value警告：<link rel=preload> 必须有一个有效的 `as` 值
【发布时间】：2019-08-08 18:02:45
【问题描述】：

当尝试在 <head> 中使用 <link> 标记 rel="preload" 视频文件时，我在 Chrome 控制台中收到警告：

我的标签是：

<link rel="preload" href="https://storage.googleapis.com/[myFilePath].mp4" as="video" type="video/mp4" media="(min-width: 768px)" crossorigin>

【问题讨论】：

这个stackoverflow.com/questions/50593084/…可能是重复的，你能得到一些帮助吗
该警告前一段时间据说是一个错误，请参阅此处 [github.com/ampproject/amphtml/issues/2492].I 我只是不确定是否有永久修复它。当您使用 Mozilla 时也会出现此警告吗？
@Lelo 我没有收到使用 Firefox 的警告。不过，它似乎没有预加载视频。

标签： html google-chrome video preload

【解决方案1】：

也许这个警告是一个错误

[as]- 当元素上设置了 rel="preload" 或 rel="prefetch" 时使用此属性。它指定正在加载/预取的内容类型相反，'preload' 你也可以使用 'prefetch'

<link rel="prefetch" href="./img/intro.mp4" as="video">

这样你就可以完成你的任务

【讨论】：

【解决方案2】：

希望这个答案很快就会过时，但是当我查看官方文档 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) 时，我发现“预加载”对 Chrome 和 Safari 的支持存在问题。我们都看到的警告可能是由于 Chrome/Safari 正在识别“preload”标签，但没有将“audio”（或您使用的任何内容）识别为“as”标签的有效值。

关于用“prefetch”替换“preload”的答案，不要这样做。事实上，作为一般规则，我绝不会在任何情况下假设两个不同命名的标签/变量/任何东西都是相同的。 “预取”将加载资源以准备导航，而“预加载”将在呈现任何内容之前在当前导航页面上加载资源。更多信息在这里预加载：https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

【讨论】：