视频预加载：在Chrome中，<link rel=preload>必须具有有效的`as`值。

Question

我试图使用链接标签的preload rel值来预加载视频。这里是文档。 在我的index.html文件中，我在头部添加了以下内容：

<link rel="preload" as="video" type="video/mp4" href="foo.mp4" />

我在最新版Chrome浏览器中收到以下控制台错误提示，尽管按照规范video是一个有效的as值。

<link rel=preload> must have a valid "as" value

我发现了这个未解决的Chrome bug，但是那是针对不同的使用情况。是否可能以这种方式预加载视频？

- Steven Musumeche

---

当我尝试在移动Safari上预加载视频时，我遇到了完全相同的问题。我尝试添加'crossorigin'并包含完整域名，但没有成功。 - justinavery

Answer 1

你可以使用这里的一小段代码在你的浏览器中进行测试。

function preloadFullVideoSupported() {
  const link = document.createElement('link');
  link.as = 'video';
  return (link.as === 'video');
}

or

function preloadFirstSegmentSupported() {
  const link = document.createElement('link');
  link.as = 'fetch';
  return (link.as === 'fetch');
}

很遗憾，我找不到任何有关在预加载时支持每个浏览器的单独 as="X" 值的文档。

- Simon

Answer 2

截至2021年7月13日，https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload 中有一条注释，大约在1/3的位置上，它说：“注意：视频预加载包含在 Preload 规范中，但目前尚未被浏览器实现。”也许这就是为什么你看到了这个警告（我也看到了）？如果是这样的话，那么不，无法使用预加载。

- sandinmyjoints